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

• Shail Paras: I'm totally confused to see this. you have an input type submit with id slider1 and on ajax success you have remove element whose id slider1 and again you have added some code... $("#slider1").html("your html"). Just think about what have you done. Can you really do this ?? $(input).html(). Can you please explain me little bit?
• Alexxio: I have removed it, though that's not the problem am asking about. My problem is calling the function.
• Ruan Mendes: Whether it's the problem you are asking about or not, it is a problem, questions should be useful to others, not just you.
• Alexxio: That's very true, but I meant that removing it didn't solve my problem.

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();
}

• Ruan Mendes: $("#slider1").remove() will remove #slider1,I don't think you should do that
• matt: That's true, I just copied what OP had. It don't see the purpose of .removing it then adding it back with .html...
• Ruan Mendes: The point is that after calling remove(), there will be no more #slider1 and the functions won't do anything
• matt: Yup, I understand that. I copied the OP's code which was erroneous. But that's not the problem he's asking about.
• Ruan Mendes: @Matt, whether it's the problem he asked about or not, you have an answer that does not work. Please update the answer so we don't have an answer that is marked correct with incorrect info. Answers at stack overflow are supposed to be useful to others, not just the one who asked the question jsfiddle.net/y7xKf

Answer 2

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();
}

Answer 3

Just call it like you did when the document loaded after you have changed the html.

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

• Ruan Mendes: I think it needs to be $('#slider1').Slider(); $.html will return the new content, the input tag.