使用.wrapInner代替.show（）

新手在這裏。我試圖用jQuery wrapInner來顯示用戶的下一個選擇，同時試圖隱藏原始元素。這是我的jsfiddle。使用.wrapInner代替.show（）

一旦我點擊代言單選按鈕，它將隱藏它們之間的元素。取消按鈕顯示元素回來。但再次單擊認可單選按鈕什麼也沒有發生。

對此的任何幫助將不勝感激！

HTML：

<div id="engr-action" > 
    <div id="engr-choice"> 
    <input id="endorse" class="engr-choice" type="radio" name="encoder-pick"/> 
     <label for="endorse">ENDORSEMENT</label> 
    <input id="encode" class="engr-choice" type="radio" name="encoder-pick"/> 
     <label for="encode">ENCODE</label>  
    </div> 
    <button id="cancel-action">Cancel</button> 
</div>

的jQuery：

$(function(){ 
$('#engr-choice').buttonset(); 

$('#cancel-action') 
    .button() 
    .click(function() { 
    $('#engr-choice').html(''); 
    $('#endorse-edit').hide(); 

    $('#engr-choice').wrapInner('<input id="endorse" class="engr-choice" type="radio" name="encoder-pick"/><label for="endorse">ENDORSEMENT</label>');     

    $('#engr-choice input').removeAttr('checked');  
    $('#engr-choice').buttonset('refresh');  

    return false; 
    }); 

$('#endorse').click(function(){  
    $('#engr-choice').html(''); 
    $('#engr-choice').wrapInner('<div id="endorse-edit"><a href="">Edit</a></div>'); 
    $('#endorse-edit').button();   

    return false; 
}); 
});

來源

2013-06-21 Charlesliam

我不確定.wrapInner是不錯的選擇。您每次點擊一個按鈕時都會嘗試重新構建DOM，這會很快導致代碼混亂。你能解釋你想要做的更好的細節嗎？ –

這部分html代碼在表列名稱操作下，其中表格由複選框列組成，控制編號爲。列，任務列和這一個操作列。操作列由與此類似的其他html組成。表格的每一行都會受到進度狀態的影響，比如說1到10.工程師選擇會顯示在特定的進度狀態，如1,3,5,6。以下兩個答案都是正確的。他們都以某種方式解釋了答案。 – Charlesliam

因爲你的元素時產生「對飛」，直通Javascript，您$('#endorse').click(..事件不會爲單元工作在DOM不存在，所以爲了添加事件到您的元素，創建在飛行中，您將需要使用事件委託，所以更改：

$('#endorse').click(function(){  
..

到

$(document).on('click', '#endorse',function(){ 
...

見:: Updated jsFiddle

來源

2013-06-21 06:20:14

@jcsanyi作爲您的元素是動態創建的，從js腳本和不加載頁面加載時，您需要將事件委派給這些元素。 –

謝謝您的洞察力。 – Charlesliam

你可以試試這個：Fiddle setup

$(function() { 
$('#engr-choice').buttonset(); 

$('#cancel-action').button().click(function() { 
     $('#engr-choice').html(''); 
     $('#endorse-edit').hide(); 
     $('#engr-choice').append('<input id="endorse" class="engr-choice" type="radio" name="encoder-pick"/>  <label for="endorse">ENDORSEMENT</label>'); 
     $('#engr-choice input').prop('checked', false); 
     return false; 
    }); 

    $('#engr-action').on('click', '#endorse', function() { 
     $('#engr-choice').html(''); 
     $('#engr-choice').wrapInner('<div id="endorse-edit"><a href="">Edit</a></div>'); 
     $('#endorse-edit').button(); 
    }); 
});

當你正在通過JavaScript將HTML元素/ jQuery的那麼直接事件綁定將不可用於他們，所以你需要通過event delegation這是將事件委託給靜態最親近的父母，你的情況是#engr-action或者你可以做我與$(document)這是總是可用於委派事件。

來源

2013-06-21 06:27:35 Jai

使用.wrapInner代替.show（）

回答

相關問題