如何使用.on目標元素加載ajax

似乎Wordpress使用AJAX加載其窗口小部件表單輸入字段，因此我無法將其加載到文檔上的任何對象準備好。我已經讀過。不過，我是如何重新綁定事件的，而且我已經玩過它了，但我似乎無法把它解決。在下面的例子中，我將如何使用.on？而且，這是唯一需要的嗎？如何使用.on目標元素加載ajax

這被加載到小工具的形式：

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

來源

2012-09-27 John

對於動態生成的元素，事件應該從元素或文檔對象的靜態父母的一個被授權，可以使用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-27 02:33:41 undefined

謝謝！你的代碼在小提琴上效果很好，但是當我在wordpress上嘗試它時，它有點古怪。首先，我必須將gt（0）更改爲gt（1）。當選擇一個單選按鈕時，它們消失。嗯..不知道如何解決這個問題。我不希望單選按鈕消失。只是它連接到的fieldset。 – John

@John好吧，我會修改它以使用ID。 – undefined

非常感謝。這很好。我已經呆了好幾個小時了。謝謝... – John

檢查examples的文件中。這是你想要的語法：

也就是說$("container").on("event", "selector", handler);

來源

2012-09-27 02:18:18 McGarnagle

您好，感謝，但它似乎並沒有工作，顯示/隱藏輸入字段。我可以做其他事情，比如在變化時提醒消息。但我無法定位＃field1和＃field2。 – John

@John這可能是因爲有多個元素ID爲「field1」等（我想不出另一個原因）。但是，如果它是父元素，那麼也可以使用JQuery'父'選擇器。 – McGarnagle

如何使用.on目標元素加載ajax

回答

相關問題