Question

我有一个jquery脚本，在文档准备好后运行。它将每个现有元素“div.cool”附加到最后的文本“[hi]”。

然后我有一个加载新元素的ajax脚本。当使用类“div.cool”添加新元素时，jquery脚本不会附加它们。

创建新元素时，如何运行脚本？

示例：

HTML：

<div class="container">
    <div class="cool">some text.</div>
    <div class="cool">some text.</div>
    <div class="cool">some text.</div>
    <div class="cool">some text.</div>
</div>

<a href="#_" onclick="loadmore();">ajax more</a>

Javscript：

$(document).ready(function() {
    $("div.cool").append("[hi]");
});

function loadmore () {

    // this for loop represents the ajax dynamic content. it cannot be changed. 
    for (i=1;i<=4;i++) {
        $("div.container").append('<div class="cool">some text.</div>');
    } 

     // $("div.cool").append("[hi]"); adding this works but it appends existing elements
}

AJAX（在exapmle中替换为for循环）：

$.ajax({
    url: http://url.com/file.php,
    cache: false,
    success: function(html){
        $("div.container").html(html);
    }
});

Answer 1

您可以添加触发器类并对其进行测试：

http://jsfiddle.net/euBYj/

$(document).ready(function() {
    $("div.cool").append("[hi]").addClass("skip");
});


function loadmore () {

    for (i=1;i<=4;i++) {
        $("div.container").append('<div class="cool">some text.</div>');
    } 

    $("div.cool:not(.skip)").append("[hi]").addClass("skip");
}

Answer 2

你可以这样做：

$('<div class="cool">some text.</div>')
    .append("[hi]")
    .appendTo("div.container");

Answer 3

效率不高，但无论如何都应该有效：

function loadmore () {

    // grab existing elements from the DOM
    var $existing = $("div.cool");

    // this for loop represents the ajax dynamic content. it cannot be changed. 
    for (i=1;i<=4;i++) {
        $("div.container").append('<div class="cool">some text.</div>');
    } 

     $("div.cool").not($existing).append("[hi]"); 
}

Answer 4

附加从ajax调用接收的新元素的最有效方法是在新元素首次在ajax调用的成功处理程序中可用时处理它们，并且仅在新元素上运行脚本，而不是之前的所有元素元件。

修改

现在，您已经向我们展示了您的ajax代码，如果您要对所有新的append("[hi]")对象进行div.cool，那么您可以将ajax代码更改为只会处理新的HTML，因为它在插入页面之前从ajax调用到达。由于它仅对新到的HTML进行操作，因此不会修改页面上的任何其他内容。

$.ajax({ url: "http://url.com/file.php", cache: false, success: function(html){ var newHTML = $(html); newHTML.find("div.cool").append("[hi]"); $("div.container").empty().append(newHTML); } });

你的ajax代码对我来说有点奇怪，因为它正在替换所有以前的元素，我认为你正在添加新的元素，就像之前的示例代码一样。你确定发布了正确的ajax代码吗？

Answer 5

<script>
$(document).ready(function() {
 $("div.cool").append("[hi]");
});

function loadmore () {
 var count = 0;
 $.each("div.container",function(){count++});
 // this for loop represents the ajax dynamic content. it cannot be changed. 
 for (i=1;i<=4;i++) {
     $("div.container").append('<div class="cool">some text.</div>');
 }
 var current = -1;
 $.each("div.container",function(){
  current++;
  if(current < count)continue;
  this.append("[hi]");
 });
 }
</script>

Answer 6

$(document).ready(function() {
   addHi($("div.cool"));
});

function addHi(elem) {
   elem.append("[hi]");
}

function loadmore () {

    // this for loop represents the ajax dynamic content. it cannot be changed. 
    for (i=1;i<=4;i++) {
        var jqobj = $('<div class="cool">some text.</div>');
        addHi(jqobj);

        $("div.container").append(jqobj);
    } 

    // $("div.cool").append("[hi]"); adding this works but it appends existing elements
}

Answer 7

获取现有div.cool的数量：

var original_number = $("div.cool").length;
使用ajax创建新元素。
获取新的div.cool：

var new_number = $("div.cool").length;

使用for循环将hi添加到新的：

for (i=original_number+1;i<=new_number;i++) {
    $("div.cool").eq(i).append('hi');
}

Answer 8

我还没有看到有人使用.filter()，所以我会把它作为一种可能性抛弃。您可以选择所有元素并过滤，然后向下过滤到您想要的元素：

$(".cool").filter(function () {

    //returns true if the end of the text string is not "[hi]" (which keeps it in the set of matched elements)
    return ($(this).text().slice(-4) != '[hi]')
}).append("[hi]");

最好的解决方案是在将元素添加到DOM之前更改元素，就像James Montagne所做的那样，我虽然只是演示了这个想法：http://jsfiddle.net/csDyM/9/

在新创建的元素上运行jquery

8 个答案: