使jQuery函数与ajax调用一起工作

Making jQuery function work with ajax call

本文关键字：调用 一起 工作 ajax jQuery 函数      更新时间：2023-09-26

我试图实现的东西，当我点击按钮。按钮是使用AJAX调用从服务器加载的。但是，当单击按钮时，什么也没有发生。下面是我的代码:

(这个ajax调用在JS Fiddle中——仅用于测试目的)JS小提琴

代码:

<div id="target"></div>
new Request.HTML({
    url: '/echo/html/',
    data: {
        html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
        delay: 0
    },
    method: 'post',
    update: 'target'
}).send();
$("button").click(function(){
    var value = $(this).siblings(".title").text();
    value += $(this).siblings(".date").text();
    alert(value);
});

由于按钮还不存在，您可以使用jQuery.on来委托事件处理程序。

$("body").on('click', 'button', function(){
  var value = $(this).siblings(".title").text();
  value += $(this).siblings(".date").text();
  alert(value); 
});

你的小提琴也不工作，因为你正在使用jQuery和MooTools，但只加载MooTools。

在看到作者页面后添加:

var value = $(this).siblings(".title").text();选择器不工作。我建议在包装器中添加一个event类(如日历事件)，并使用:

var value = $(this).parents(".event").find(".title").text();

如果您正在通过AJAX(或任何其他方法)向DOM添加元素，并且您希望侦听器保持与它们的绑定，那么您需要将这些侦听器附加到文档中不更改的元素上-如$(document)。

。

$(document).on('click','button',function(e) {
 //your code here
});

你的代码的问题是，你得到所有的按钮通过做$("button")，然后附加点击监听器到他们。问题是，当你这样做的时候，你的按钮还没有附加到文档，因此，不会有一个点击监听器附加到它。

如果按钮不存在页面加载。您不能使用$("button")来解决它。你必须用其他东西(例如div)包围它，然后这样做:$('div').on('click','button', function(){...})

你需要考虑两件事。

ONE -包含在mootools中的jQuery。我很惊讶，$函数在mootools版本，你正在使用给了我一个非常基本的jQuery函数。我尝试了更高版本的mootools，但还是发生了同样的情况。我确信它不是jQuery和mootools只是使用$ variable为他们的目的。[可选:所以，你也可以考虑在脚本中将jQuery定义为一个不同的变量]

所以，我在jsfiddle的外部资源中添加了一个链接到最新的jQuery，然后它工作了。不要忘记展开左侧的外部资源。但是，如果mootools为了自己的目的而使用$，那么jQuery肯定会覆盖它。请考虑使用jQuery作为不同于$.

的变量。

2 -使用AJAX请求的onSuccess函数您调用AJAX请求，因此您必须等待一段时间浏览器加载它，这取决于用户的互联网连接。这就是我们使用onError和onSuccess事件的原因。在onSuccess中编写按钮函数，因为在AJAX加载之前，按钮在文档中不存在。

请检查此代码，它可以工作。

http://jsfiddle.net/U7ewu/代码:

new Request.HTML({
url: '/echo/html/',
data: {
    html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
    delay: 0
},
method: 'post',
update: 'target',
onSuccess: function() {
    $("button").click(function(){
        var value = $(this).siblings(".title").text();
        value += $(this).siblings(".date").text();
        alert(value);
    });
}
}).send();
编辑:

请使用$.noConflict();这样mootools和jquery就不会在$ variable上相互冲突。$已经被mootools使用了，所以请使用jQuery这个词来代替。

请检查这个文件。http://jsfiddle.net/wkMep/

代码:

$.noConflict();
new Request.HTML({
url: '/echo/html/',
data: {
    html: "<div id='0001'>"+"<h5 class='title'>Hello World</h5>"+"<h4 class='date'>2014-07-19</h4>"+"<button> Add to Calendar </button>"+"</div>",
    delay: 0
},
method: 'post',
update: 'target',
onSuccess: function() {
    jQuery("button").click(function(){
        var value = jQuery(this).siblings(".title").text();
        value += jQuery(this).siblings(".date").text();
        alert(value);
    });
}
}).send();

try this 

$("button").on("click",function(){
    var value = $(this).siblings(".title").text();
    value += $(this).siblings(".date").text();
    alert(value);
});
相关文章：