1

似乎 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();
    }
4

2 回答 2

2

对于动态生成的元素，事件应该从元素或文档对象的静态父对象之一委托，您可以使用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/

于 2012-09-27T02:33:41.700 回答
1

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

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

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

于 2012-09-27T02:18:18.577 回答