4

これはコードです：

$(".adauga_incasare").click(function(){
       var html = $(".incasari")[0].outerHTML;
       $(html).insertAfter($(".incasari").last());
    });

    $(".del_incasare").click(function(){
         alert("dsdasdasd");
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
    			<div class="incasari">
    				<div class="data_incasare_container">
    					<label><b>Data</b></label>
    					<input class ="data_incasare" type="text" id="datepicker">
    					<label class ="data_incasare_hidden">12-06-2014</label>
    				</div>
    				<div class="suma_incasare_container" style="">
    					<label><b>Suma</b></label>
    					<input class="suma_incasare" type="text" maxlength="8" name="pret_unitar[]" alt=""> 
    					<label class ="suma_incasare_hidden">100</label>
    				</div>
    			    <div class="coscos" style="">
    			   	     <a class="stergereIncasare" href="javascript:void(0);"><i class="icon-trash"></i></a>
    			   	     <div style="clear:both;"></div>	
    			   	     <div class ="incasare_action">
    				   	     <input class="btn btn-success" type="button" style="margin-left:50px;width:80px;height:30px;float:left;" value="Salveaza"></input>
    				   	     <a href="javascript:void(0);" class="del_incasare delrow"></a>
    			   	 	 </div>
    			   	 	 <div style="clear:both;"></div>
    			    </div>
    			    <div style="clear:both;"></div>
    		    </div>
    
    		    <div style="clear:both;"></div>	
    			<a href="#" class="adauga_incasare">+ Adauga incasare noua</a>
    			<div class="toram">
    					<label style = 'cursor:default;'>Total incasat: <b>100 &euro;</b></label>
    					<label style = 'cursor:default;'>Total ramas: <b>1012 &euro;</b></label>
    			</div>		
    		</div>

outerHTML は正常に動作しますが、その後incasariクラスを「クローン」すると、クローン部分で onclick イベントが機能しなくなります。削除ボタンがあります。最初のクラス「incasari」では動作しますが、クローン クラスでは動作しません。なんで ？

4

2 に答える 2

0

クリック イベントを発生させるために使用したメソッドは、ページの読み込み中に作成された DOM 要素でのみ機能します。動的に作成された DOM 要素は、このメソッドでは処理されません。ページの読み込み後に作成される要素、または動的に作成される要素については、Event Delegation を使用する必要があります。これには、メソッドで jQuery を使用します。

$(document).on("click", ".del_incasare", function(){
    // do some cool stuff here.
});

ここでは、ドキュメントの代わりに、ページの読み込み中に既に DOM にあった任意の親要素を使用できます。

于 2014-06-27T07:42:08.700 に答える