iT邦幫忙

0

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

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


<div id='test'>123</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事件的語法要如何寫呢,謝謝

1 個回答

16
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掉的吧)

fillano iT邦超人 1 級 ‧ 2008-10-08 19:56:06 檢舉

irukawa,你在產生.cancel的click事件時,這個button還沒產生哪。像wordsmith講的改一下應該就可以了。這是先後順序的問題,其實跟jQuery沒直接關係。

我要發表回答

立即登入回答