如何重新綁定jQuery腳本被調用一次後？

我使用此表單發送信息。

<form method="post" id="myForm" action="includes/functions.php"> 
    <input type="hidden" name="group_id" value="$group_id" /> 
    <input type="hidden" name="submit_join"/> 
    <button class="request" id="sub" name="submit_join">Join</button> 
</form>

這個jQuery腳本運行的PHP腳本。

$("#sub").click(function() { 
$.post($("#myForm").attr("action"), 
     $("#myForm :input").serializeArray(), 
     function(){ $("#sub").html("Applied").fadeIn().addClass("applied").removeClass("request"); 
    }); 
}); 
$("#myForm").submit(function() { 
    return false; 
});

這是PHP腳本的作用。（不是事先準備好的聲明）

if (isset($_POST['submit_join'])) { 
    //User ID 
    $user_id = $_SESSION['user_id']; 
    $group_id = $_POST['group_id']; 

    $sql="INSERT INTO group_assoc (user_id, group_id, permission, dateTime) VALUES ('$user_id', '$group_id', 0, now())"; 
    if (!mysqli_query($connection, $sql)) { 
    die('Error: ' . mysqli_error($connection)); 
    } 
}

當有人點擊該按鈕一次 - 它工作得很好。

它會觸發jQuery腳本
jQuery的腳本觸發PHP腳本
PHP的，它的工作
jQuery的消除類的「要求」，並提出一類「應用」

問題： 當同一用戶點擊另一個按鈕（意味着他們剛點擊的按鈕的副本）時，該頁面忽略jQuer y腳本並執行通常會執行的操作，刷新頁面。這是不必要的過程。

爲什麼有幾種形式，爲什麼幾個按鈕？我正在爲網站中的每個組做一個PHP while循環，並且每個表單都包含一個按鈕（Join），它允許您使用上面的jQuery腳本加入組並更改數據庫上的值。

問：我怎樣才能重新綁定jQuery的腳本，這樣點擊另一個按鈕（<button class="request" id="sub" name="submit_join">Join</button>）時，它會不忽略jQuery腳本？

來源

2013-09-27 Tiffany Lowe

這個問題似乎是，你與重複的ID工作，帶班的，而不是ID

<form method="post" class="myForm" action="includes/functions.php"> 
    <input type="hidden" name="group_id" value="$group_id" /> 
    <input type="hidden" name="submit_join" /> 
    <button class="request" class="sub" name="submit_join">Join</button> 
</form>

和

$(document).on('submit', '.myForm', function() { 
    return false; 
}) 
$(document).on('submit', '.sub', function() { 
    var $form = $(this).closest('form'); 
    $.post($form.attr("action"), 
    $form.serializeArray(), function() { 
     $("#sub").html("Applied").fadeIn().addClass("applied").removeClass("request"); 
    }); 
})

來源

2013-09-27 03:20:43

我將所有東西都插到原位並重新加載頁面。任何想法爲什麼？ –

您是否在html中做過更改 –

確實如此。我調整了一下。我再次將.myForm更改爲#myForm，以及將class =「myForm」更改爲id =「＃myForm」，並刷新了屏幕。當我嘗試使用提供的代碼（未改變）執行它時，它根本沒有做任何事情。 –

它總是一個好主意，嘗試在事件中傳遞事件處理程序，並執行event.preventDefault()以避免瀏覽器在元素上的默認行爲。

$("#myForm").submit(function(event) { 
    event.preventDefault(); 
});

至於多種形式，您可以使用一個處理程序來處理表單提交。 $('#sub')將只綁定到頁面上的第一個按鈕，使用一個類來附加到相同類型的多個按鈕，這仍然是低效的。這裏是一個樣本：

$('.subbtn').click(function(e){ 
    var $form = $(this).parents('form'), 
     subUrl = $form.attr('action');  

    e.preventDefault(); 
    $.post(...) ; 
})

這個處理程序應該照顧你的要求。但是，您可以使用附加到表單常用包裝的單個處理程序（最糟糕的「主體」）來提高效率。

來源

2013-09-27 03:26:48 jagzviruz

如果我提供了第一部分代碼，它會在發生其他事情之前放置它，它會不會觸發表單嗎？ –

該片段將阻止基於瀏覽器的表單提交處理。既然你正在實現你自己的表單處理器，它不會影響你的表單處理器。 – jagzviruz

就像jagzviruz所說的那樣，最好使用submit事件的事件處理程序來防止頁面刷新。此外，請確保您沒有任何重複的元素ID。

我的做法是這樣的：（未經測試）

HTML

<form method="post" class="myForm" action="includes/functions.php"> 
<input type="hidden" name="group_id" value="$group_id" /> 
<input type="hidden" name="submit_join"/> 
<button class="request" class="submit" name="submit_join">Join</button>

$(".myForm").each(function() { 
    var $form = $(this), 
     action = $form.attr('action'), 
     $submit = $form.find('.submit'); 

    $form.submit(function(event) { 
     event.preventDefault(); 

     return false; 
    }); 

    $submit.click(function(event) { 
     event.preventDefault(); 

     $.post(...); 
    }); 
});

這是相當多的與jagzviruz提出的解決方案相同，但爲了清楚起見，我更喜歡在.each()內部執行此類操作。

來源

2013-09-27 05:11:21 irot

如何重新綁定jQuery腳本被調用一次後？

回答

相關問題