Jquery修改了选择器类没有被拾取

I'm having trouble building a bit of jquery that grabs a selector that has been modified after a previous event.

我在构建一些jquery时遇到了麻烦,它抓取了一个在前一个事件之后被修改的选择器。

For example, I have a some html which looks like this:

例如,我有一些看起来像这样的html:

<div class='1'>test</div>

if i click it with the following:

如果我点击以下内容:

$(".1").click(function(){
    alert('found 1!'); 
    $(this).attr('class', '2');
});

the alert works and when i inspect the element, the class has been switched to '2'

警报有效,当我检查元素时,该类已切换为'2'

now when i click it again, with the following:

现在当我再次点击它时,使用以下内容:

$(".2").click(function(){
    alert('found 2!'); 
    $(this).attr('class', '1');
});

I still get 'found 1!' as an alert.

我仍然得到'找到1!'作为警报。

Is what i'm trying not possible for some reason, am i doing it wrong or is there a better way of doing it? Thanks!

我出于某种原因试图不可能,我做错了还是有更好的方法呢?谢谢!

3 个解决方案

#1

You need to use jquery .on() (or .delegate()) function to bind events for dynamically updated elements.

您需要使用jquery .on()(或.delegate())函数来绑定动态更新元素的事件。

As below code,

如下代码,

$(".1").on("click", function(){
    alert('found 1!'); 
    $(this).attr('class', '2');
});

$(".2").on("click",function(){
    alert('found 2!'); 
    $(this).attr('class', '1');
});

#2

.click() binds only at execution time. What you are looking for is .live() or .on(). I'll use .on(), the jQuery 1.7 syntax:

.click()仅在执行时绑定。你要找的是.live()或.on()。我将使用.on(),jQuery 1.7语法:

$(document).on("click", ".1", function() {
  console.log('1 clicked');
  $(this).attr('class', '2');
});
$(document).on("click", ".2", function() {
  console.log('2 clicked');
  $(this).attr('class', '1');
});

#3

When you do this:

当你这样做:

$(".1").click(function()

You are binding to a specific DOM element. Once it's bound, it no longer matters what class is on the object. The event handler is bound to the object itself. The way jQuery executes this statement is that it finds all the DOM objects with class="1" and sets an event listener on them.

您绑定到特定的DOM元素。一旦受到限制,对象上的类就不再重要了。事件处理程序绑定到对象本身。 jQuery执行此语句的方式是它找到所有具有class =“1”的DOM对象并在其上设置事件侦听器。

If you want event handlers to handle dynamic changes to the page, then you need to use jQuery's .live() or .delegate() (jQuery 1.6 or before) or jQuery's .on() (jQuery 1.7+).

如果您希望事件处理程序处理页面的动态更改,那么您需要使用jQuery的.live()或.delegate()(jQuery 1.6或更早版本)或jQuery的.on()(jQuery 1.7+)。

#1