2つの 'onclick'イベントの使用方法

以下は私のコードです。クリックするとどうしてうまくいかないのですか？？2つの '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」クラスで、将来の要素にクリックイベントを定義する必要があります。以下の作業コードを確認してください。動的に文書に追加され

$(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

2つの 'onclick'イベントの使用方法

答えて

関連する問題