来自Jquery的HTML响应不适用于javascript

Question

我发现很多与此问题类似的帖子，但我认为我做错了，因为我没有将javascript放在ajax调用的响应中。

基本上，ajax返回放置在div内的纯html。 该div位于我的页面内部，并且该页面已经包含对CSS和javascript文件的引用。

在其中的一个javascript文件中，我尝试呈现由ajax调用返回的按钮，以使用jQuery ui函数看起来不错，所以基本上我要做的就是

$(".ButtonClass").button();

这段代码在document.ready函数中，ajax返回的html包含所有按钮的“ ButtonClass”。

.button()适用于返回的ajax html外部的按钮，但不适用于ajax调用返回的元素。

我认为它应该工作，因为将CSS样式应用于结果，但是我无法获得任何功能来处理结果，我重复一遍，我不返回javascript代码，我将此代码保存在整个页面中引用的外部文件中。

Answer 1

如果要为AJAX请求返回的元素启用按钮，则应在收到响应时再次执行它。

.button()在调用时已选择的元素上执行-在发出AJAX请求之前调用时不包括AJAX元素。

请注意， $(".ButtonClass")也将包含以前的.ButtonClass元素，因此它们将两次转换为按钮。 您只需要从AJAX响应中选择一个即可。

Answer 2

尝试致电

$(".ButtonClass").button();

在ajax回调中。

Answer 3

我认为当ajax调用成功终止时，您需要应用装饰器函数。 遵循以下原则：

$('#myelement').load('script.php', function() {

   // Now the page has some more button to decorate:
   $(".ButtonClass .ugly").button().removeClass('ugly'); 

});

如您所见，我在新按钮上添加了“丑陋”类，以免重新美化存在的美丽按钮:)

Answer 4

每次在应为按钮的页面中引入新标记时，都必须调用.button（）函数。 您可以在.ready（）上正确执行此操作，但也应该在ajax调用的成功函数上执行此操作。

Answer 5

填充div后，您将必须初始化这些按钮。

例如，如果您的div存储在名为$container的javascript变量$container ，则在将内容添加到页面后，运行代码$('.ButtonClass',$container).button() 。

Answer 6

在您的Ajax回调中，执行$(".ButtonClass").button(); 再次。