如何使用兩個'onclick'事件

下面是我的代碼，爲什麼當我點擊附加文本？如何使用兩個'onclick'事件

1：點擊這是一段。

2：點擊附加文本

3：須出示追加項目與紅色。

$(document).ready(function(){ 
 
    $(".ali").click(function(){ 
 
     $(this).parent().append("<b class='reza'>Appended text</b>"); 
 
    }); 
 
    $(".reza").click(function(){ 
 
     $(this).append("<li style='color:red'>Appended item</li>"); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 

 
    <p><span class="ali"> This is a paragraph. </span> </p> 
 

 

 
</body> 
 
</html>

來源

2017-08-31 Alireza

的[事件綁定上動態創建的元素？]可能的複製（https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements） – Xufox

因爲帶班「禮」的元素尚未創建，則需要用「reze」級未來元素定義click事件。檢查下面的工作代碼。

$(document).ready(function(){ 
 
    $(".ali").click(function(){ 
 
     $(this).parent().append("<b class='reza'>Appended text</b>"); 
 
    }); 
 
    $("body").on("click",".reza",function(){ 
 
     $(this).append("<li style='color:red'>Appended item</li>"); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 

 
<p><span class="ali"> This is a paragraph. </span> </p> 
 

 

 
</body> 
 
</html>

來源

2017-08-31 05:30:16

元件，其被動態地添加到文檔，不能以正常方式發出事件偵聽器。

這是通常在jQuery中添加事件偵聽器的方式。

$(element).on('click', function() { 
    // do something 
});

上面的例子不會有動態添加元素工作的原因是由於這樣的事實，當腳本被編譯的元素不存在。

那麼爲什麼這個工作？

$(parent).on('click', 'element' function() { 
    // do something 
});

這工作，因爲當文件被編譯，父已經存在。如果你有一個父母的參考，那麼你可以隨時找回孩子。由於DOM是模塊化的。

這個問題以某種方式已被多次詢問。這是首選答案。

Event binding on dynamically created elements?

來源

2017-08-31 07:42:13

如何使用兩個'onclick'事件

回答

相關問題