Button function only works on first click

Question

I am trying to get a button to work throughout multiple clicks to change what is displaying to the users on every click but the button is only working on the first click.

I have a hunch that it either has got to do with the Ajax or the fact that each time that the button is clicked the button too is drawn.

I can verify that getData.php is working properly for the fist click.

HTML for the button:

<button id="search">Seach</button>

Jquery function for the button:

document.getElementById('search').addEventListener('click', function (e) {
    var info1= document.getElementById("dataInput").value;
    var div = document.getElementById("contentDisplay");

    //removes the current data that is displaying
    while( div.hasChildNodes() ){
        div.removeChild(div.lastChild);
    }

    var midHTML;
    $.ajax({
        async: false,
        type: 'POST',
        url: 'getData.php',
        data: {key: "Search", info: info1},
        success: function(data) {
            if(data.length > 10){
                 div.innerHTML = HTML+data;
            } else {
                 div.innerHTML = "No data";
            }
        }
    });
});

You mean the button itself is re-drawn as a result of the ajax success callback? When it is removed from the DOM, its event listeners go with it. So, yes, it would only work once. You can either addListener again after each re-draw (not recommended), or attach the listener to a 'higher' DOM element and delegate it to the button. Look up jQuery's event delegation for that. e.g. $(document).on('click', 'button.search', handlerFunc); — Brad
– Brad, Commented Feb 1, 2014 at 1:18

Felipe Pereira · Accepted Answer · 2014-02-01 02:02:46Z

1

Fast, ugly and not tested

document.getElementById('search').addEventListener('click', clickForTheButton);

function clickForTheButton(){
    var info1= document.getElementById("dataInput").value;
    var div = document.getElementById("contentDisplay");

    //removes the current data that is displaying
    while( div.hasChildNodes() ){
        div.removeChild(div.lastChild);
    }

    var midHTML;
    $.ajax({
        async: false,
        type: 'POST',
        url: 'getData.php',
        data: {key: "Search", info: info1},
        success: function(data) {
            if(data.length > 10){
                 div.innerHTML = HTML+data;
            } else {
                 div.innerHTML = "No data";
            }
            document.getElementById('search').addEventListener('click', clickForTheButton);
        }
    });
}

answered Feb 1, 2014 at 2:02

Felipe Pereira

12.5k4 gold badges43 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nick Over a year ago

Works like a charm! +1 for answering something that works but will not accept answer until tomorrow to see if someone has a prettier solution. Thanks!!

Faron · Accepted Answer · 2014-02-01 01:21:47Z

0

You need to remove the default functionality of DOM from that node. You can accomplish by adding event.defaultPrevent(); right before $.ajax() line or return false; right after $.ajax()

edited Feb 1, 2014 at 1:21

answered Feb 1, 2014 at 1:09

Faron

1,24311 silver badges20 bronze badges

2 Comments

Nick Over a year ago

That is just throwing an error: Uncaught TypeError: Object #<MouseEvent> has no method 'defaultPrevent'

Nick Over a year ago

I have tried both ways but the button is still unresponsive for the 2nd click. I also didn't get event.defaultPrevent(); working at all

Collectives™ on Stack Overflow

Button function only works on first click

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related