Question

我有一个button我希望它每隔一段时间执行一个函数（第一个，第三个，第五个等），每隔一个时间点击一个第二个函数（第二个），4日，6日等）。我认为最好的方法是更改id的{{1}}并分配两个JQuery函数。但是，这似乎不起作用。正如您在this jsfiddle中所看到的，当我更改button的{{1}}时，第一个id中的函数仍会被调用。

button

为什么会这样？是因为JQuery在文档加载时基本上将函数绑定到按钮，所以即使我更改了id，函数仍然被绑定了吗？

P.S。我已经找到了解决问题的另一种方法，所以我对这方面的答案不感兴趣。只是想了解更多有关JQuery和Javascript的信息。

Answer 1

是的，当文档加载时，jQuery将运行一次初始化代码，并将点击处理程序附加到DOM中当前的元素。代码运行时，只存在#search元素 - $("#csearch")选择器不匹配任何元素，并且点击处理程序不会被分配给任何元素。

jQuery对象通过引用而不是id引用DOM元素 - 当您更改元素的id时，之前创建的指向该元素的jQuery对象仍将保留对该元素的引用元素。

Answer 2

如果您在HTML中动态更改数据，则您对body有吸引力，因为在加载页面后，分隔符（＆＃39; #csearch＆＃39;）不存在。试试吧：

$(document).ready(function() {
  $('body').on('click','#search', function() {
    alert("search clicked!");
    $("#search").html("Close Search");
    $("#search").attr("id", "csearch");
  });

  $('body').on('click','#csearch', function() {
    alert("csearch clicked!");
    $("#csearch").html("Search");
    $("#csearch").attr("id", "search");
  });
})

Answer 3

虽然你已经找到了另一种方法，但是一个很好的方法是使用模数运算符（％），它可以用来返回0或1.你可以为按钮和onclick分配一个值 - 将该值传递给检查返回值的函数（即：var number = value％2），如果数字为偶数则为0，如果为奇数则为1。然后，您可以使用它来指示按钮单击的操作 - 如果数字== 0则执行此操作，如果是== 1则执行此操作。

然后递增计数并重置按钮的值以进行下一次单击。这样您就不必更改按钮的ID - 您只需更改其行为即可。只是想一个切换按钮点击效果的方法：）

Answer 4

查找event delegation - 在SO上有很多答案可以详细解释。

至于您的解决方案 - 只需在按钮上添加data值，然后在每次点击时切换/读取它。然后就不需要更改id了，所以不需要更改事件处理程序：

$("#search").click(function() {
    var oddeven = $(this).data("oddeven") || 1;
    if (oddeven == 1) {
      alert("search clicked!");
      $(this).html("Close Search");
      $(this).data("oddeven", 2)
    }
    else {
      alert("csearch clicked!");
      $(this).html("Search");
      $(this).data("oddeven", 1)
    }
});

更新了小提琴：https://jsfiddle.net/vxn3ozzb/1/

或者，你可以有两个按钮并在它们之间切换：

<button id="search" class="btn btn-default action-button shiny-bound-input" type="button">
  Search
</button>
<button id="csearch" class="btn btn-default action-button shiny-bound-input" type="button" style='display:none'>
  Close Search
</button>

码

$("#search").click(function() {
  alert("search clicked!");
  $(this).hide();
  $("#csearch").show();
});
$("#csearch").click(function() {
  alert("close search clicked!");
  $(this).hide();
  $("#search").show();
});

小提琴：https://jsfiddle.net/vxn3ozzb/2/

Answer 5

在处理具有更改选择器的元素时，您需要使用事件委派，而不是绑定。

$(document).ready(function() {
      $(document).on("click","#search",function() {
        alert("search clicked!");
        $("#search").html("Close Search");
        $("#search").attr("id", "csearch");
      });

      $(document).on("click","#csearch",function() {
        alert("csearch clicked!");
        $("#csearch").html("Search");
        $("#csearch").attr("id", "csearch");
      });
    })

工作示例：https://jsfiddle.net/DinoMyte/vxn3ozzb/4/

Answer 6

我相信，更改元素的ID对于这个特定的场景来说不合适。相反，最好使用数据属性来实现这一目标。例如，您可以更改数据属性值以跟踪它，而不是更改ID，然后您可以相应地应用逻辑。这种方式将来，如果你想为按钮添加额外的行为（odd，even和somethingElse），你不需要编写额外的事件处理程序，只需要在同一个事件处理程序中再添加一个条件。接下来，如果按钮的行为增加，您可以将逻辑分离并通过将行为值传递给它来将其放入一个函数中，这样您的事件处理程序将更加清晰和易于管理。

请建议是否有人有更好的解决方案。

 



$(document).ready(function() {
  $("#search").on("click", function() {
  	var action = $(this).data("action");
    
    if(action === "odd") {
    	$(this).data("action", "even");
      alert("odd");
    }
    else if (action === "even") {
    	$(this).data("action", "odd");
      alert("even");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div>
  <button id="search" data-action="odd" class="btn btn-default action-button shiny-    bound-input" type="button">
    Search
  </button>
</div>

ID更改后，JQuery函数无法处理元素

6 个答案: