在ajax返回的html上调用jquery函数

Call a jquery function on ajax returned html

本文关键字：调用 jquery 函数 html ajax 返回      更新时间：2023-09-26

我有一个场景，我有一个像这样的代码

HTML

<input type="submit" value="" name="submit" id="slider1">

脚本

$(document).ready(function() {
   $("#slider1").Slider();
});

当文档加载时，我的Slider()函数对我的输入框做了一些事情。
我面临的问题是，我在ajax返回上替换相同的输入框html，不能让我的Slider()调用。

AJAX返回

...
success: function(data) {
   // This was removing the wrapper element, all the other calls
   // to $('#slider1') were doing nothing
   //$("#slider1").remove();
   $("#slider1").html('<input type="submit" value="{{ some variable }}" name="submit" id="slider1">');
}
...

我正在考虑在输入框内调用Slider()函数，以便它将被调用，

类似:

    $("#slider1").html('<input type="submit" callSliderFunction="Slider()"  value="{{ some variable }}" name="submit" id="slider1">');

可以在那里调用吗?如果不是，我该如何做到这一点?由于

在成功函数中将. slider()添加到页面后，我将再次调用它。

success: function(data) {
   $("#slider1").remove();
   $("#slider1").html('<input type="submit" value="{{ some variable }}" name="submit" id="slider1">');
   $("#slider1").Slider();
}

正如Juan指出的那样，一旦你使用了。remove()，你就不能在#slider1上调用。html()了。从你所看到的，我猜你试图改变#slider1的值，在这种情况下，它会更简单的做

success: function(data) {
   $("#slider1").attr("value", "{{ some variable }}");
   $("#slider1").Slider();
}

设置好HTML后再调用它

success: function(data) {
  var wrapper = $("#slider1");
  wrapper.html('<input type="submit" value="{{ some variable }}" name="submit"   id="slider1">');
  wrapper.Slider();
}

就像你在更改html后加载文档时那样调用它。

$("#slider1").Slider();
相关文章：