Running functions on replaced content with jquery

Question

I had guessed that this code would work. But the JS doesn't alert anything. What is the best way to run functions on replaced content? It is a simple code as you can see, if you work with jquery. I need answers only if you have suggestions.

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button type="button" id="add" name="sub">Add</button> 

<script>
$(document).on('click',"#add",function(){
$( this ).replaceWith("<button type='button' id='sub'> Alert </button>");
});

$(document).ready(function(){
$("#sub").click(function()
{
alert("Does it alert?");
});
});
</script>

Possible duplicate https://stackoverflow.com/questions/770308/events-not-registering-after-replacewith — Niladri, Sep 15 '17 at 13:40
Your last code section should follow the selection format as in the first script section — MaxZoom, Sep 15 '17 at 13:42

score 0 · Accepted Answer · answered Sep 15 '17 at 13:38

Add via

$(document).on('click', '#sub', function() { })

Example

$(document).on('click',"#add", function() {
    $( this ).replaceWith("<button type='button' id='sub'> Alert </button>");
});

$(document).ready(function() {
   $(document).on('click', '#sub', function() {
      alert("Does it alert?");
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type="button" id="add" name="sub">Add</button>

Running functions on replaced content with jquery

1 Answers1