Question

我试图通过多次点击获得一个按钮，以便在每次点击时更改向用户显示的内容，但该按钮仅适用于第一次点击。

我有一种预感，它要么与Ajax有关，要么每次点击按钮时都会绘制按钮。

我可以验证getData.php是否适用于第一次点击。

按钮的HTML：

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

按钮的Jquery功能：

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

Answer 1

快速，丑陋且未经过测试

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

Answer 2

您需要从该节点中删除DOM的默认功能。您可以在event.defaultPrevent();行之前添加$.ajax()或在return false;之后添加$.ajax()来完成

按钮功能仅适用于第一次单击

2 个答案: