jQuery - div title .attr()更改不能处理.append()内容

时间:2013-06-18 16:37:07

标签: jquery html append title

HTML

<div class="pop-circle Cats"></div>

CSS

.pop-circle { width:8px;height:8px;border-radius:4px;background-color:#50377A; }

JS

$(".pop-circle").attr("title", "blah");

按预期工作。但是,稍后(在用户交互之后)如果我.append(mydiv)有几个具有相同“pop-circle”类的div(Cats,Dogs等),则不会将title属性添加到它们中。这是有道理的,没有新的事件。那你会怎么做?

我的第一个想法是这样做:

$("div.pop-circle").hover( function() {
    $(".Cats").attr("title", "cats");
    $(".Dats").attr("title", "dogs");
    // ...
});

我认为悬停应该在页面加载后附加的div上触发。但是,这有一个奇怪的效果,该属性没有添加,至少不是我悬停div的前几次,或者根本没有。 (对不起,我不想展示附加div的实例。)

我想知道是否有更合理的方法来做到这一点。

5 个答案:

答案 0 :(得分:2)

侦听器未附加到新动态创建的元素。添加代码后,需要重新注册任何事件侦听器。在函数中收集函数并再次调用它们通常很有帮助。

function ActivateListeners() {
    $('div.pop-circle').hover(function() {
       //do something 
    });
}
ActivateListeners();

$('something').click(function() {
    $('body').append("<div class='pop-circle'>Stuff</div>");
    ActivateListeners();
});

编辑:虽然这有效,但热情的Coder的回答(使用.on())是处理这个问题的正确方法。

答案 1 :(得分:2)

对于这样的情况,我会说编写一个自动将title添加到元素的函数是最好的方法。

或者如果你想让hover工作,你必须将它绑定到文档或静态父级,并从那里将此事件委托给div元素。

$(document).on("mouseover", ".pop-circle", function () { //or instead of document use IMMEDIATE STATIC parent
    var title = $(this).attr("class").split(" ")[1]; //taking out the extra thing out of the class attribute - the animals
    $(this).attr("title", title);
});

您的HTML现在看起来像这样:

<div class="pop-circle Cats"></div>
<br/>
<div class="pop-circle Dogs"></div>
<br/>
<div class="pop-circle Rats"></div>
<br/>
<div class="pop-circle Monkeys"></div>
<br/>
<button>Add more</button>
<input type="text" />

我添加额外.pop-circle的代码:

$("button").on("click", function () {
    var animal = $("input:text").val();
    $("input:text").val("");
    $(this).before("<div class= 'pop-circle " + animal + "' ></div>");
});

hover无法按照您编码的方式工作的原因是,当您将hover绑定到.pop-circle时,它只会绑定到现有元素而不会绑定到未来的元素。要支持将来的元素,您必须将此事件绑定到其父级,例如document"body"

以下是演示: http://jsfiddle.net/hungerpain/zxfL2/1/

答案 2 :(得分:1)

感谢@passionateCoder“将此事件绑定到其父级”

以下是我最终使用的内容:

$("#content").on("click mouseover", ".pop-circle", function() {

    $(".Dogs").attr("title", "Dog Categories");
    $(".Cats").attr("title", "Cat Categories");
    // ...

});

答案 3 :(得分:0)

根据我的理解,jQuery中的attr()方法只获取在加载时定义的属性,并且不包含脚本更改的值。 jQuery 1.6版引入了prop()方法,该方法反映了页面加载后对DOM所做的更改。用法完全相同。

编辑:在重新阅读你的问题后,我可能会偏离此处。我很抱歉。也许prop()有一天会派上用场! :)

答案 4 :(得分:0)

您可以将数据attr添加到div,然后使用它来创建标题。

http://jsfiddle.net/pjdicke/53Yf9/1/

$("#output").on('mouseenter', '.pop-circle', function () {
    var type = $(this).data('type');
    $(this).attr('title', type);
    alert( $(this).attr('title') );
});

$('button').on('click', function () {
    var newItem = $('<div class="pop-circle" data-type="Dats"></div>');
    $(newItem).appendTo('#output');
});