Question

似乎Wordpress使用AJAX加载其窗口小部件表单输入字段，因此我无法定位它在文档就绪时加载的任何内容。我已经读到了.on是如何重新绑定事件的，我已经玩过它，但我似乎无法理解它。我将如何在以下示例中使用.on？而且，这是唯一需要的吗？

这会加载到窗体小部件中：

<fieldset id="fieldradio">
    <legend>pick</legend>
    <input type="radio" name="radiobutton" value="Yes" />
    <input type="radio" name="radiobutton" value="No"  />
</fieldset>

<fieldset id="field1" style="display:none;">
    <legend>this is field 1</legend>
    <input type="text" name="fdsa" value="value1" /><br />
    <input type="text" name="fdsa" value="value1" /><br />
</fieldset>

<fieldset id="field2" style="display:none;">
    <legend>this is field 2</legend>
    <input type="text" name="asdf" value="value2" /><br />
    <input type="text" name="asdf" value="value2" /><br />
</fieldset>

这是我想要使用的JavaScript：

jQuery("input[name=radiobutton]").change(function(){          

    if (jQuery(this).val() == "Yes") {
        jQuery("#field1").fadeIn('slow');
    }
    else {
        jQuery("#field1").hide();
    }    

    if (jQuery(this).val() == "No") {
        jQuery("#field2").fadeIn('slow');
    }
    else {
        jQuery("#field2").hide();
    }

Answer 1

对于动态生成的元素，事件应该从元素或文档对象的静态父级之一委派，您可以使用on方法。

$(document).on("change", "input[name=radiobutton]", function(){  
      var ind = $(this).index('input[type=radio]');
      $('fieldset:gt(0)').hide().eq(ind++).show()   
});

http://jsfiddle.net/MaNkE/

$(document).on("change", "input[name=radiobutton]", function(){  
     var ind = $(this).index();
     $('#field1, #field2').hide().filter('#field'+ind).show()
})

http://jsfiddle.net/35tpE/

Answer 2

检查文档中的examples。这是您想要的语法：

jQuery("body").on("change", "input[name=radiobutton]", function(){         
    $(this).parent().hide();
});

那是$("container").on("event", "selector", handler);

如何使用.on来定位用ajax加载的元素

2 个答案: