クリックイベントハンドラはクリック数のn-1倍と呼ばれます

Question

ページには日付のリストがあります。各日付の右側には、更新と削除の2つのアイコンがあります。私はdata-update_urlとdata-delete_urlをキャッチしたい。

問題は、アイコンをクリックすると何も起こりません。 もう一度クリックすると警告メッセージが表示されます。もう1回クリックすると警告メッセージが2回表示されます。等々。それはアラートメッセージがn-1回のクリック数で示されていることです。

jsfiddleでモデル化しようとしました。しかし、失敗した。

このような現象が発生する原因は何ですか？

<li>03 January 2016 
<a class="update" id="update_framedate_26" href="javascript:void(0)"><span data-update_url="/frame_date/26/update/" class="glyphicon glyphicon-edit" aria-hidden="true"></span></a> 
<a class="delete" id="remove_framedate_26" href="javascript:void(0)"><span data-delete_url="/frame_date/26/delete/" class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> 
</li> 


<li>15 January 2015 
<a class="update" id="update_framedate_27" href="javascript:void(0)"><span data-update_url="/frame_date/27/update/" class="glyphicon glyphicon-edit" aria-hidden="true"></span></a> 
<a class="delete" id="remove_framedate_27" href="javascript:void(0)"><span data-delete_url="/frame_date/27/delete/" class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> 
</li> 



<script> 
function get_form(url){ 
    var update_url = url.target.getAttribute('data-update_url'); 
    var delete_url = url.target.getAttribute('data-delete_url'); 

    var cuaghtUrl = update_url || delete_url; 

    alert(cuaghtUrl); 
} 

function handle_update_buttons(){ 
    var update_button_list = $(".update"); 
    $(update_button_list).click(function() { 
     $(this).click(get_form); 
    }) 
} 

function handle_update_buttons(){ 
    var update_button_list = $(".update"); 
    $(update_button_list).click(function() { 
     $(this).click(get_form); 
    }) 
} 

function handle_delete_buttons(){ 
    var delete_button_list = $(".delete"); 
    $(delete_button_list).click(function() { 
     $(this).click(get_form); 
    }); 
} 

handle_update_buttons(); 
handle_delete_buttons(); 
</script> 

Answer 1

このコードそれは呼ばれていますたび、そのクリックハンドラをフックし、get_formを呼び出すクリックハンドラをフックします：

function handle_update_buttons(){ 
    var update_button_list = $(".update"); 
    // ------------------vvvvvv 
    $(update_button_list).click(function() { 
     $(this).click(get_form); 
    // --------^^^^^^ 
    }) 
} 

コメントの矢印に注意してください。だから初めて、それはちょうど2番目のハンドラをフックアップし、それだけです。 2回目は、ハンドラをにもう一度に接続し、最初の呼び出しのハンドラを起動します。 3番目の時間にハンドラをフックアップし、最初の2つのハンドラがトリガされます。等々。

あなたはおそらくこれを行うためのもの：ちょうど各クリックでget_formを呼び出すハンドラ一度を、フックアップ

function handle_update_buttons(){ 
    $(".update").click(get_form); 
} 

...。

Answer 2

これは、クリックイベントごとに別のハンドラを追加するためです。

はのは、あなたのコードを見てみましょう：

$(update_button_list).click(function() { 
    $(this).click(get_form); 
}) 

は何それがないことである：

• それは、ユーザーがクリックしたときに、あなたに（を呼び出し、「クリック」イベントハンドラをアタッチ要素）：
  • get_formコールバック$(this)要素

私はちょうどそれを呼び出す、あなたは、単に最初のクリックであなたのget_formコールバックを呼び出すために望んでいたので、代わりに（他のすべてのクリックで、何度も何度も）それを再取り付けの前提としています

$(update_button_list).click(function() { 
    var url = ... set this variable to whatever you want it to be ... 
    get_form(url); 
}) 

Answer 3

あなたのコードで問題が発生した場合は、クリックイベントを常に添付しています。 いつも添付する必要があります。 それはすべての時間を働く一度だけ接続ここで以下のコード

$(update_button_list).click(function() { 
get_form($(this)); 

}） をご覧ください。 これが役立つことを願っています。

function get_form(url) { 
 
    var update_url = url.parent().find('span[data-update_url]').attr('data-update_url'); 
 
    var delete_url = url.parent().find('span[data-update_url]').attr('data-delete_url'); 
 
    var cuaghtUrl = update_url || delete_url; 
 
    alert(cuaghtUrl); 
 
} 
 

 
function handle_update_buttons() { 
 
    var update_button_list = $(".update"); 
 
    $(update_button_list).click(function() { 
 
    get_form($(this)); 
 
    }) 
 
} 
 

 
function handle_update_buttons() { 
 
    var update_button_list = $(".update"); 
 
    $(update_button_list).click(function() { 
 
    get_form($(this)); 
 
    }) 
 
} 
 

 
function handle_delete_buttons() { 
 
    var delete_button_list = $(".delete"); 
 
    $(delete_button_list).click(function() { 
 
    get_form($(this)); 
 
    }); 
 
} 
 

 
handle_update_buttons(); 
 
handle_delete_buttons();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<li>03 January 2016 
 
    <a class="update" id="update_framedate_26" href="javascript:void(0)"><span data-update_url="/frame_date/26/update/" class="glyphicon glyphicon-edit" aria-hidden="true"></span></a> 
 
    <a class="delete" id="remove_framedate_26" href="javascript:void(0)"><span data-delete_url="/frame_date/26/delete/" class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> 
 
</li> 
 

 

 
<li>15 January 2015 
 
    <a class="update" id="update_framedate_27" href="javascript:void(0)"><span data-update_url="/frame_date/27/update/" class="glyphicon glyphicon-edit" aria-hidden="true"></span></a> 
 
    <a class="delete" id="remove_framedate_27" href="javascript:void(0)"><span data-delete_url="/frame_date/27/delete/" class="glyphicon glyphicon-remove" aria-hidden="true"></span></a> 
 
</li>