jQuery - div 标题 .attr() 更改不适用于 .append() 内容答案

【问题标题】：jQuery - div title .attr() change not working on .append() contentjQuery - div 标题 .attr() 更改不适用于 .append() 内容
【发布时间】：2013-06-18 16:37:06
【问题描述】：

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 的实时示例。）

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

【问题讨论】：

标签： jquery html append title

【解决方案1】：

对于这种情况，我会说编写一个自动将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】：

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

这是我最终使用的：

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

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

});

【讨论】：

【解决方案3】：

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

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

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

编辑：虽然这可行，但热情的编码器的答案（使用 .on()）是处理此问题的正确方法。

【讨论】：

哎呀对不起@passionateCoder，我不知道我是如何/为什么输入的，大声笑:)

【解决方案4】：

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

编辑：重新阅读您的问题后，我可能会离开这里。我很抱歉。也许 prop() 有一天会派上用场！ :)

【讨论】：

我在研究这个的过程中最终阅读了关于 .prop() 的内容，但是听起来 .attr() 是设置 HTML 属性的合适选择，这就是我在这里所做的，和 .prop() 用于对象属性。我不知道您多久可以互换使用一种或另一种。我只是在这里触及表面，我不是专家，但我认为 .prop() 应该在某个时间点完全取代 .attr() ，然后有一些反弹，现在我认为 .attr( ) 将继续前进。
@PJBrunet 你可能是对的。我对它的了解有些有限。我确实在这里遇到了一个广受欢迎的 SO 答案，它非常清楚：stackoverflow.com/a/5876747/638087

【解决方案5】：

您可以将数据属性添加到 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');
});

【讨论】：