Question

我有一个表单元格，在点击事件中有一个警告，如下所示：

<table>
<tr>
<td id="cid" onclick="alert('I want to run 2nd!')">Test</td>
</tr>
</table>

稍后我想在jquery上使用相同元素的事件处理程序（click）添加一个新警报：

<script>
$('#cid').on('click',function() { alert('I want to run 1st!'); });
</script>

当我运行代码时，我得到2个警报（如预期的那样），但不是所需的订单。第二个警报应首先出现，第一个出现我想要的最后一个是：

<table>
<tr>
<td id="cid" onclick="alert('I want to run 1st!');alert('I want to run 2nd!')">Test</td>
</tr>
</table>

我尝试实现此代码（来自其他帖子）：

<script>
var clcks = $('#cid').data('events').click.slice();
var cid = $('#cid').unbind('click');
$.each(clcks.reverse(), function() { cid.click(this); });    
</script>

但结果是一样的。
我做错了什么？

Answer 1

事件注册优先于内联声明的事件而非外部（不显眼）事件。因此，在您的情况下，首先执行onclick="alert('I want to run 2nd!')，然后执行$('#cid').on('click',function() { alert('I want to run 1st!'); 如果您希望根据您的要求实现它，您需要创建单个函数并根据您的偏好调用警报，使用第一种或第二种方法，而不是两者。此外，作为一种良好做法，尽量避免内联事件。你变得相对更快，更容易维护。

Answer 2

<!-- HTML-->
    <!DOCTYPE html>
    <html>

    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
      <div id='button' style='width:40px;height:40px;background-color:red;'></div>
    </body>

    </html>

// JS
$(function(){        
    $("#button").bind('click',first);
    $("#button").bind('click',second);
    $("#button").bind('click',third);

    var clicks = $('#button').data('events').click.slice();
    var button = $('#button').unbind('click');
    $.each(clicks.reverse(), function() {
        button.click(this);
    });    
});

function first() { alert("first"); };
function second() { alert("second"); };
function third() { alert("third"); };

Answer 3

我这样做时会使用数据和jQuery来支持无限数量的元素。此外，请确保td位于tr和table内，因为如果没有这两个容器，它将无法正常运行。

$("#cid").click(function () {
  $("#cid").unbind("click").attr("onclick","").click(function () {
    console.log('I want to run 2nd!');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><td id="cid" onclick="console.log('I want to run 1st!')">Test</td></tr>
</table>

Answer 4

好吧，我设法搞清楚了！以下代码完全符合我的要求：

<table><tr></tr><td id="cid" onclick="alert('I want to run 2nd!')">Test</td></tr></table>
<script>
document.getElementById("cid").setAttribute("onclick","alert('I want to run 1st!');"+document.getElementById('cid').getAttribute('onclick'));
</script>

希望它有所帮助。

两个单击事件的顺序相反

4 个答案: