jQuery ON函數，其值分配給參數

Question

我試圖通過更改單選按鈕選擇來委派一個函數。

$(document).ready(function(){
    $('body').on('change', 'radioBtnName', function(e){
        $(this).after('<p>"No click me!"</p>');   
    });
});​

我想要做的是將一些值傳遞給處理函數。 喜歡

{param1:"hell", param2:"world"}

然后在函數（e）中訪問這些值

e.data.param1

如何包含這些參數並在設置委托時賦予它們值。 我正在創建單選按鈕，並希望將該功能與選擇中的更改相關聯。

Answer 1

如果data-*屬性是每個元素，則可以使用data-*屬性輕松完成。 所以有按鈕：

<input type="radio" data-param1="hell" data-param2="world" />

讓他們使用：

$(this).data("param1");
$(this).data("param2");

此外，如果你調用$(this).data() ，它將返回整個data對象。

Answer 2

將它們作為數據屬性存儲在單選按鈕上：

$(document).on('change', 'radioBtnName', function(e){
    var $button = $(this);
    var param1 = $button.data("param1");
    var param2 = $button.data("param2");
    // do whatever you want with the values :)   
});

注意使用document而不是委托事件的body 。 這避免了對DOM就緒處理程序的需求（並避免了body錯誤）

Answer 3

如果我說得對，你想用.on()方法傳遞額外的參數。 我希望以下示例可以幫助您。

 $(document).on('change', '#radioBlock input[type="radio"]', {param1: 'hell', param2: 'world'}, function(e){ console.log(e.data.param1); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="radioBlock"> <input type="radio" id="one" name="one" value="One"> <input type="radio" id="two" name="two" value="Two"> <input type="radio" id="three" name="three" value="Three"> </div> 

Answer 4

您可以像這樣使用$(this).data() ：

 $(function() { $("body").on('click', "#radioBlock input[type='radio']", function(e) { alert('Data Value - ' + $(this).data('value')); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="radioBlock"> <label> <input type='radio' name='radio_input' data-value='1'> Radio 1 </label> <label> <input type='radio' name='radio_input' data-value='2'> Radio 2 </label> <label> <input type='radio' name='radio_input' data-value='3'> Radio 3 </label> </div> 

希望這可以幫助！