jQuery's .click - ส่งผ่านพารามิเตอร์ไปยังฟังก์ชันผู้ใช้


283

ฉันพยายามเรียกใช้ฟังก์ชันที่มีพารามิเตอร์โดยใช้ .click ของ jQuery แต่ฉันไม่สามารถใช้งานได้

นี่คือวิธีที่ฉันต้องการให้ทำงาน:

$('.leadtoscore').click(add_event('shot'));

สายไหน

function add_event(event) {
    blah blah blah }

ใช้งานได้ถ้าฉันไม่ใช้พารามิเตอร์เช่นนี้

$('.leadtoscore').click(add_event);
function add_event() {
    blah blah blah }

แต่ฉันต้องสามารถส่งผ่านพารามิเตอร์ผ่านadd_eventฟังก์ชันของฉันได้

ฉันจะทำสิ่งเฉพาะนี้ได้อย่างไร

ฉันรู้ว่าฉันสามารถใช้งาน.click(function() { blah }ได้ แต่ฉันเรียกใช้add_eventฟังก์ชันจากหลาย ๆ ที่และต้องการทำเช่นนี้


นี่เป็นลูกบุญธรรมจากpatricksคำตอบซึ่งฉันคิดว่าเป็นทางออกที่ดี: jsfiddle.net/naRRk/1
jAndy

คำตอบ:


514

เพื่อความทั่วถึงฉันเจอวิธีแก้ไขปัญหาอื่นซึ่งเป็นส่วนหนึ่งของฟังก์ชันที่นำมาใช้ในเวอร์ชัน 1.4.3 ของตัวจัดการเหตุการณ์การคลิก jQuery

จะช่วยให้คุณสามารถส่งแผนที่ข้อมูลไปยังวัตถุเหตุการณ์ที่ได้รับการป้อนกลับโดยอัตโนมัติไปยังฟังก์ชั่นการจัดการเหตุการณ์โดย jQuery เป็นพารามิเตอร์แรก แมปข้อมูลจะถูกส่งไปยัง.click()ฟังก์ชันเป็นพารามิเตอร์แรกตามด้วยฟังก์ชันตัวจัดการเหตุการณ์

นี่คือรหัสเพื่อแสดงสิ่งที่ฉันหมายถึง:

// say your selector and click handler looks something like this...
$("some selector").click({param1: "Hello", param2: "World"}, cool_function);

// in your function, just grab the event object and go crazy...
function cool_function(event){
    alert(event.data.param1);
    alert(event.data.param2);
}

ฉันรู้ว่ามันช้าในเกมสำหรับคำถามนี้ แต่คำตอบก่อนหน้านี้นำฉันไปสู่การแก้ปัญหานี้ดังนั้นฉันหวังว่ามันจะช่วยให้ใครบางคนในบางครั้ง!


11
นี่คือสิ่งที่ฉันต้องการ (ย้อนกลับ) ฉันไม่ได้ทำงานในโครงการนี้มาก่อน แต่ฉันคิดว่าฉันใช้ 1.4.0 นี่เป็นวิธีที่ดีที่สุด
Paul Hoffer

1
ฉันกำลังสร้างวัตถุบนฝั่งเซิร์ฟเวอร์แบบไดนามิกและผูกเหตุการณ์การคลิกด้วย: rOnClientClick = "imageClicked ({param1: '" + obj.Command + "'}); return false"; จากนั้นในฝั่งไคลเอ็นต์ฉัน: function imageClicked (event) {if (event.param1 == "GOTO PREVIOUS") {... ถ้าฉันใช้ event.data.param1 มันบอกว่ามันไม่ได้กำหนด ตอนนี้ฉันพิมพ์มันออกมาที่นี่ฉันเห็นความแตกต่างใช่ไหม!
ครอบครัว

1
@ ครอบครัว - ฮ่า ๆ ๆ ไม่มีปัญหามันเป็นเรื่องดีที่จะช่วยแม้ผ่านความคิดเห็น;)
Chris Kempen

5
@totymedli - ผมคิดว่าคุณก็สามารถเรียกมันว่าที่อื่นผ่านวัตถุของโครงสร้างเดียวกัน: var param_obj = {data : {param1: "Hello", param2: "World"}}; cool_function(param_obj);?
Chris Kempen

1
นี่ดีกว่าการใช้ HTML5 data- คุณสมบัติขอบคุณมาก! (และแก้ไข JSHint ที่บ่นเกี่ยวกับการใช้ 'this' ในการติดต่อกลับด้วย!)
Matthew Herbst

77

คุณต้องใช้ฟังก์ชันที่ไม่ระบุชื่อเช่นนี้:

$('.leadtoscore').click(function() {
  add_event('shot')
});

คุณสามารถเรียกมันอย่างที่คุณมีในตัวอย่างเพียงแค่ชื่อฟังก์ชันที่ไม่มีพารามิเตอร์ดังนี้:

$('.leadtoscore').click(add_event);

แต่add_eventวิธีการจะไม่ได้รับ'shot'ตามที่มันเป็นพารามิเตอร์ แต่สิ่งที่clickผ่านไปมันกลับโทรกลับซึ่งเป็นeventวัตถุตัวเอง ... ดังนั้นจึงไม่สามารถใช้ได้ในกรณีนี้แต่ทำงานได้สำหรับคนอื่น ๆ หากคุณต้องการส่งพารามิเตอร์ให้ใช้ฟังก์ชันที่ไม่ระบุชื่อ ... หรือมีตัวเลือกอื่นให้ใช้.bind()และส่งผ่านข้อมูลดังนี้:

$('.leadtoscore').bind('click', { param: 'shot' }, add_event);

และเข้าถึงได้add_eventเช่นนี้

function add_event(event) {
  //event.data.param == "shot", use as needed
}

เมื่อคุณพูดเพียงนั่นหมายความว่าเท่านั้น? ประการที่สองนั่นหมายความว่าฉันจะสามารถใช้ $ (นี้) ในฟังก์ชั่น add_event ของฉันเหมือนปกติฉันจะอยู่ในฟังก์ชั่นที่ไม่ระบุชื่อ?
พอลฮอฟเฟอร์

2
@phoffer - ใช่ "แค่" หมายถึงไม่มี params เฉพาะชื่อฟังก์ชั่นมันเป็นการอ้างอิงถึงฟังก์ชั่นไม่ใช่ผลลัพธ์ของการเรียกใช้ฟังก์ชันที่คุณต้องการกำหนดให้กับclickตัวจัดการ ในวิธีการที่ไม่ระบุชื่อและ.bind()ตัวอย่างด้านบนที่คุณสามารถใช้ได้thisมันจะอ้างถึงที่.loadtoscoreคุณคลิก ในตัวอย่างที่ผ่านมาadd_event(event)สิ่งที่เหมือนกันคือใช้thisหรือ$(this)มันจะเป็นสิ่งที่คุณต้องการ
Nick Craver

1
@phoffer: คุณจะต้องผ่านองค์ประกอบอย่างชัดเจนเพื่อที่จะใช้มันเช่น: และfunction(){ add_event('shot', $(this));} จะเป็นองค์ประกอบ jQuery ที่นี่ (ใช้ได้กับแม้ว่าตามที่ Nick พูดถึง) function add_event(event, element){...}elementbind()
เฟลิกซ์ลิ่ง

@Felix - นอกจากนี้เขายังสามารถใช้$(this)ภายในฟังก์ชันตัวอย่างเช่น: jsfiddle.net/tSu5t
Nick

35

ถ้าคุณเรียกว่าแบบที่คุณมี ...

$('.leadtoscore').click(add_event('shot'));

... คุณจะต้องadd_event()ส่งคืนฟังก์ชันเช่น ...

function add_event(param) {
    return function() {
                // your code that does something with param
                alert( param );
           };
}

.click()ฟังก์ชั่นจะถูกส่งกลับและใช้เป็นอาร์กิวเมนต์สำหรับ


@jAndy - ขอบคุณสำหรับการโพสต์ตัวอย่างรวมถึงeventพารามิเตอร์ ฉันควรจะรวมมัน : o)
user113716

27

ฉันประสบความสำเร็จในการใช้. on () เช่น:

$('.leadtoscore').on('click', {event_type: 'shot'}, add_event);

จากนั้นภายในadd_eventฟังก์ชั่นคุณจะสามารถเข้าถึง 'shot' ดังนี้

event.data.event_type

ดูเอกสาร. on ()สำหรับข้อมูลเพิ่มเติมที่พวกเขาให้ตัวอย่างต่อไปนี้:

function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

11

ใช่นี่คือโพสต์เก่า ไม่ว่าใครก็ตามอาจพบว่ามีประโยชน์ นี่เป็นอีกวิธีในการส่งพารามิเตอร์ไปยังตัวจัดการเหตุการณ์

//click handler
function add_event(event, paramA, paramB)
{
    //do something with your parameters
    alert(paramA ? 'paramA:' + paramA : '' + paramB ? '  paramB:' + paramB : '');
}

//bind handler to click event
$('.leadtoscore').click(add_event);
...
//once you've processed some data and know your parameters, trigger a click event.
//In this case, we will send 'myfirst' and 'mysecond' as parameters
$('.leadtoscore').trigger('click', {'myfirst', 'mysecond'});

//or use variables
var a = 'first',
    b = 'second';

$('.leadtoscore').trigger('click', {a, b});
$('.leadtoscore').trigger('click', {a});

6
      $imgReload.data('self', $self);
            $imgReload.click(function (e) {
                var $p = $(this).data('self');
                $p._reloadTable();
            });

ตั้งค่าวัตถุ javaScript เป็นองค์ประกอบ onclick:

 $imgReload.data('self', $self);

รับ Object จากองค์ประกอบ "this":

 var $p = $(this).data('self');

! น่ากลัว น่าเศร้านี่เป็นสิ่งเดียวที่ใช้ได้เมื่อฉันพยายามใช้ตัวแปร jquery! ไม่รู้ว่าทำไม : |
cregox

3

ฉันได้คำตอบง่ายๆ

 <button id="btn1" onclick="sendData(20)">ClickMe</button>

<script>
   var id; // global variable
   function sendData(valueId){
     id = valueId;
   }
   $("#btn1").click(function(){
        alert(id);
     });
</script>

ค่าเฉลี่ยของฉันคือการส่งผ่านonclickเหตุการณ์ค่าไปยังjavascript function sendData(), เริ่มต้นให้กับตัวแปรและใช้มันโดยวิธีการจัดการเหตุการณ์ jquery

สิ่งนี้เป็นไปได้ตั้งแต่ตอนแรก sendData(valueid)ถูกเรียกและเริ่มต้นค่า จากนั้นหลังจากเรียกใช้เหตุการณ์ jquery แล้วใช้ค่านั้น

นี้เป็นทางออกที่ตรงไปข้างหน้าและสำหรับการแก้ปัญหารายละเอียดไปที่นี่


ฉันไม่เห็นวิธีการส่งพารามิเตอร์แบบไดนามิกที่นี่เพียงค่าฮาร์ดโค้ด
user1451111

วิธีนี้คุณจะผ่านเฉพาะค่ารหัสและสูญเสียองค์ประกอบและวัตถุเหตุการณ์
Zoltán Sule
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.