JavaScript работает только один раз

Question

У меня есть следующий скрипт. Он работает, когда пользователи нажимают кнопку поиска, но работают только один раз. Пожалуйста, помогите мне, как я могу заставить его работать для большего количества кликов. Спасибо,

<form action="" method="get" id="searchform"> 
    <input name="q" type="text" id="search" size="32" maxlength="128" class="txt"> 
    <input type="button" id="hit" value="Search" class="btn"> 
</form> 

<script type="text/javascript"> 
    var nexturl =""; 
    var lastid =""; 
    var param; 
    $(document).ready(function() { 
    $("#hit").on("click", function myFunction() { 
     param = $('#search').val(); 
     alert("I am an alert box!"); 
     if (param != "") { 
     $("#status").show(); 
     var u = 'https://graph.facebook.com/search/?callback=&limit=100&q='+param; 
     getResults(u); 
     } 

     $("#more").click(function() { 
     $("#status").show(); 
     $("#more").hide(); 
     pageTracker._trackPageview('/?q=/more'); 
     var u = nexturl; 
     getResults(u); 
     }); 
    }); 
    }); 
</script> 

Answer 1

Я знаю, что это было до того много раз спрашивали, но здесь это:

$(document).on("click", "#hit", function() { 
    ... 
}); 

Вы должны позволить пузырек события до документа, чтобы изменения в DOM не уничтожить обработку событий.

Здесь он находится в a jsFiddle. Дайте мне знать, что вы видите.

Answer 2

Если вы на самом деле не представляя форму и просто работает JavaScript, вы должны запустить его как onsubmit на форме, а не так:

<form id="searchform" onsubmit='return submitForm()'> 
    <input name="q" type="text" id="search" size="32" maxlength="128" class="txt" > 
    <input type="button" id="hit" value="Search" class="btn"> 
</form> 

<script type="text/javascript"> 
    var nexturl =""; 

    function submitForm(){ 
    var lastid =""; 
    var param = $('#search').val(); 

    alert("I am an alert box!"); 
    if (param != "") { 
     $("#status").show(); 
     var u = 'https://graph.facebook.com/search/?callback=&limit=100&q='+param; 
     getResults(u); 
    } 

    //Prevents the form submitting 
    return false; 
    } 

    $("#more").click(function() { 
    $("#status").show(); 
    $("#more").hide(); 
    pageTracker._trackPageview('/?q=/more'); 
    var u = nexturl; 
    getResults(u); 
    }); 
</script> 

Имеет ли больше кнопки всегда существует или что-то это динамически добавляется/удаляется? Если это так, вам, вероятно, понадобится сделать что-то вроде

$("body").on("click", "#more", function() { 
    $("#status").show(); 
    $("#more").hide(); 
    pageTracker._trackPageview('/?q=/more'); 
    var u = nexturl; 
    getResults(u); 
}); 

вместо этого.

Answer 3

Он также работает во втором поиске. Элементы второго поиска просто добавляются в список результатов поиска, возможно, поэтому вы их не видите. Попробуйте $ ("# data"). Empty(); прежде чем вы начнете добавлять результаты нового поискового запроса.