why when i remove an html button still executing onclick event?

Question

i´m trying to create a dynamically button with a jquery instruction append, but first i remove the content from the container div this all occurs when click an image, so the button created after that event should be repacing the las one, however, the problem is that the button erased still executing its own onlcick event , so i get multiple window open in my browser.

i leave below the code , i hope some body can help to understand whats happening , by the way i don´t know why but the button is created inside a span tag in the DOM ... and then just inside the div container.

<script> 
    idDelegacion = 0;
    function planoClick(id) {
         idDelegacion = id;
         $.ajax({
             type: 'GET',
             contentType: "application/json; charset=utf-8",
             url: '@Url.Action("partialViewLuminariasDelegacion","Luminaria")',
             data: {
                 "idDelegacion": idDelegacion
             },
             datatype: "json",

             success: function (data) {

                 $("#luminariasDelegacion").html(data);
                 $("#nuevaLuminaria").show();
                 $("#luminariasDelegacion").show();
                 $("#nuevaLuminaria").empty();
                 //$("#nuevaLuminaria").live().ready(function () { $("#nuevaLuminaria").children().children("#btnNuevaLuminaria").remove(); });
                 $("#nuevaLuminaria").append('<input type="button"  value="Nueva Luminaria" id="btnNuevaLuminaria" style="position:relative"/>').button().click(function jsAbreOperacionLuminaria() {
                     url = "../../Luminaria/Create/?idDelegacion=" + idDelegacion
                     window.open(url);
                 });
             },
             error: function () {
                 alert('error al traer las luminarias de la delegación ' + idDelegacion)
             }
         });
     }
 </script>

possible duplicate of [Best way to remove an event handler in jQuery?](http://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery) The issue is that you aren't removing the event handler. That's not the same as HTML it is a JavaScript Event that you've bound to. — abc123, Nov 27 '13 at 18:33

score 0 · Accepted Answer · answered Nov 27 '13 at 18:35

0

The new button also fires the event because you are using live to bind the event, which is actually tied to the body and just listens for the target named nuevaLuminaria. Before you replace the first button, call die on it to remove the listener.

answered Nov 27 '13 at 18:35

swatkins

13,219
4
42
75

thanks for your answer it help me a lot to understand what was happening, but in the end i just created one button to do what i need. – Alfredo Espinosa Nov 27 '13 at 22:52

why when i remove an html button still executing onclick event?

1 Answers1