Question

我正在尝试使用jQuery绑定关闭按钮的事件。

第一次（当文档完全加载时）我必须单击按钮两次以查看效果。

p标签的点击也不起作用。

    <p>Click the button below</p>
    <button class="blue">Remove the click event handler</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        function changeColor(evt) {
            $('p').css("background-color", $(evt.target).attr('class'));
            $(evt.target).removeAttr('class').attr('class', 'pink');
        }
        $("button").click(function () {
            if ($(this).hasClass('pink')) {
                $(this).off("click", changeColor);
            }
            else {
                $(this).on("click", changeColor);
            }
        });
        $("p").on("click", function () {
            $('button').removeAttr('class').attr('class', 'green').on("click", changeColor);
        });
    </script>

Answer 1

我建议您在操作选择器时使用Event Delegation方法，即删除和添加类。

$(document).on('click', "button:not(.pink)", changeColor)

代替document，你应该使用最近的静态容器。

委派事件的优点是，它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，我们可以使用委托事件将click事件绑定到动态创建的元素，并且还避免频繁附加和删除事件处理程序。

＆＃13;

$(document).on('click', "button:not(.pink)", function() {
  $(this).removeClass().addClass('pink');
  console.log('Clicked')
})

＆＃13;

.blue {
  background-color: blue;
}

.pink {
  background-color: pink;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button class="blue">Remove the click event handler</button>
<button class="blue">Remove the click event handler</button>

＆＃13;

要以编程方式触发事件，您需要使用.trigger()

$('button').removeClass().addClass('green').trigger('click');

Answer 2

如果$("p").on("click", function () {无效，请替换此代码这个

  $('p').click(function () {

你写这个替换的地方到处都是。

以jquery中的off事件绑定为条件

2 个答案: