jQuery 中 html()所產生的按鈕，無反應

javascript jquery

irukawa 2008-10-08 16:53:03 ‧ 21343 瀏覽

&lt;script type="text/javascript" src="js/jquery.js">&lt;/script>
&lt;script type="text/javascript">
$('document').ready(function() {
    $('#test').click(function() {
        $('#test').html('&lt;input type="button" value="測試" class="cancel"/>');
    });
    $('.cancel').click(function() {
        alert('cancel');
    });
});
&lt;/script>


&lt;div id='test'>123&lt;/div>

用html()產生的button，不會執行click中的程式
請問大家有解決的辦法嗎

看更多先前的討論...收起先前的討論...

jamesjan iT邦高手 1 級 ‧ 2008-10-09 11:10:37 檢舉

看起來 jQuery 的語法很精簡，寫法也很直覺
值得學習

wordsmith iT邦高手 1 級 ‧ 2008-10-09 17:55:18 檢舉

我們先來做個小實驗，在「 $('#test').addClass('edit')」加上一行「alert('hi')」，範例如下:

$('document').ready(function() {      
    $('#test').click(function() {      
        $('#test').html('<input type="button" value="測試" class="cancel"/>');
        $('#test').addClass('edit');
		alert('hi');
        $('.cancel').click(function() {      
		$('#test').removeClass('edit');
            alert('cancel');      
        });     
    });      
});

然後你執行之後，會發現按鈕按下去後，alert不但show出cancel，也秀出了hi。

為什麼，hi不是註冊在test的click事件嗎?

這是因為事件的觸發順序，不但觸發button的click事件，也觸發了div#test的click事件，所以你雖然在button#cancel中移除了edit這個class，但是div#test的click事件馬上又加回來，這樣看起來，好像就沒有移除，或者沒有辦法移除一樣。

wordsmith iT邦高手 1 級 ‧ 2008-10-09 17:55:25 檢舉

因為不知道你程式的實際結構與用途，但是如果僅僅就要讓這個範例照你所說的運作的話，可以改成:

$('document').ready(function(){
    $('#test').click(function(){
        $('#test').html('<input type="button" value="測試" class="cancel"/>');
        $('#test').addClass('edit');
        $('.cancel').click(function(){
            $('#test').unbind('click'); //將div#test的click事件移除
            $('#test').removeClass('edit');
            //$('#test').removeAttr('class'); 可以連class屬性都拿掉
            alert('cancel');
        });
    });
});

wordsmith iT邦高手 1 級 ‧ 2008-10-09 18:03:53 檢舉

jQuery真的是好物，如果有在寫JavaScript的話，把它學起來生產力可是倍增哦

irukawa iT邦新手 2 級 ‧ 2008-10-22 16:10:54 檢舉

假如第7行後面
$('#test').html('123'); 恢復成原始狀態
那$('#test') bind click事件的語法要如何寫呢，謝謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

wordsmith

iT邦高手 1 級 ‧ 2008-10-08 17:45:36

最佳解答

你的情況的話，將註冊.cancel事件放進#test註冊click的event中，應該就可以work了

寫法如下:

&lt;pre class="c" name="code">$('document').ready(function() {   
    $('#test').click(function() {   
        $('#test').html('&lt;input type="button" value="測試" class="cancel"/>');   
        $('.cancel').click(function() {   
            alert('cancel');   
        });  
    });   
});

(ps.你的範例中，最後少了，應該是copy&paste掉的吧)