Question

在页面上有一个日期列表。每个日期右侧都有两个图标：更新和删除。我想要捕获data-update_url和data-delete_url。

问题是，当我点击，比如说更新图标时，没有任何反应。再次单击使其显示警报消息。再次单击会显示两次警报消息。等等。即警报消息显示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

那是因为你要在每个点击事件上添加另一个处理程序。

让我们看看您的代码：

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

它的作用是：

它附加了一个＆＃34;点击＆＃34;事件处理程序，调用时（当用户点击你的元素时）：
- 会在get_form元素

我假设您只想在第一次点击时调用get_form回调，而不是重新连接它（在每次其他点击时反复重复），只需调用它：

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

Answer 2

这段代码连接了一个点击处理程序，每次调用它将挂钩一个调用get_form的点击处理程序：

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

注意评论中的箭头。所以第一次，它只是挂钩第二个处理程序，这就是全部。第二次，它再次连接一个处理程序，然后触发第一次调用的处理程序。 thrid时间，它第三次连接处理程序，并触发前两个处理程序。等等。

您可能打算这样做：

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

...它只挂了一个处理程序一次，每次点击都会调用get_form。

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>

Click事件处理程序被称为点击数的n-1倍

3 个答案: