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-*属性轻松完成。所以按下按钮：

<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>

希望这有帮助！

jQuery ON函数，其值分配给参数

4 个答案: