Call a jquery function on ajax returned html

Question

I have a scenario where I have a code like this

HTML

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

SCRIPT

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

when document loads, some stuff is done to my input box by my Slider() function.
The issue am facing is that, am replacing the same input box html on ajax return and can't get my Slider() called.

AJAX RETURN

...
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">');
}
...

I was thinking of calling the Slider() function inside the input box so that it will be called,

something like:

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

Is it possible to call it there? If not How can I achieve this? Thanks

Answer 1

I would just call .Slider() again after you add it to the page in the success function.

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

As Juan pointed out, you can't call .html() on #slider1 once you .remove() it. From looking at what you have, its my guess that you're trying to change the value of the #slider1, in which case it would be simpler to do just that

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

Answer 2

就像在更改html后加载文档时一样，只需调用它即可。

$("#slider1").Slider();

Answer 3

Just call it after you've setup the HTML

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