jQuery Ajax點擊不起作用，除非頁面被刷新

我一直在我的PHP項目中混淆了一些JS和ajax，並且我遇到了一些問題。 ajax似乎只在點擊後刷新頁面或只是刷新點擊後才起作用。我使用jQuery 3.2.1。我是第一次使用.live（）jQuery Ajax點擊不起作用，除非頁面被刷新

，但現在已被廢棄，我讀了。對（）是一個另類，所以我使用了。

這是我的JS部分：

$(".up_vote").on("click", function() { 
    var post_id = $(this).attr('postid'); 
    $.ajax({ 
     type: "POST", 
     data: { 
     'post_id': post_id, 
     'action': 'upvote' 
     }, 
     url: '<?php echo $url; ?>/includes/functions.php', 
     dataType: 'json', 
     success: function(response) { 
     if (response.ResponseCode == 200) { 
      $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*'); 
     } else { 
      alert(response.Message); 
     } 
     } 
    }); 
    }); 

    $(".down_vote").on("click", function() { 
    var post_id = $(this).attr('postid'); 
    $.ajax({ 
     type: "POST", 
     data: { 
     'post_id': post_id, 
     'action': 'downvote' 
     }, 
     url: '<?php echo $url; ?>/includes/functions.php', 
     dataType: 'json', 
     success: function(response) { 
     if (response.ResponseCode == 200) { 
      $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*'); 
     } else { 
      alert(response.Message); 
     } 
     } 
    }); 
    }); 

    $("#btnpost").click(function() { 
    var post = $("#post_feed").val(); 
    if (post == "") { 
     alert("This can't be empty."); 
     return false; 
    } else { 
     $.ajax({ 
     type: "POST", 
     data: { 
      'post_feed': post, 
      'action': 'post' 
     }, 
     url: '<?php echo $url; ?>/includes/functions.php', 
     dataType: 'json', 
     success: function(response) { 
      if (response.ResponseCode == 200) { 
      $("#post_feed").val(""); 
      $('#feed_div').load('<?php echo $url; ?>/index.php #feed_div'); 
      } else { 
      alert(response.Message); 
      } 
     } 
     }); 
    } 
    }); 
});

有什麼我失蹤或者做錯了？

來源

2017-04-02 Martin

你好？您在Ajax'success'回調中使用['.load']（http://api.jquery.com/load/）？你驚訝地發現一些奇怪的行爲？而且你甚至不使用Ajax響應......這看起來很奇怪。 –

您沒有正確使用'on'，如果您的ajax請求也替換了您點擊的元素，則需要使用**委託**版本 – adeneo

在js中使用php的地方使用雙引號 – C2486

首先確保你擊中目標，試試這個，看看警報顯示：

$(function() { 
    $(document).on('click', '.up_vote', function() { 
     alert('ok'); 
    }); 
});

Click事件附加到頁面加載現有元素。這裏的關鍵詞是「現有」。當我們使用ajax加載某些東西時，我們會操縱DOM。我們正在放置全新的元素。所以我們需要做的是在放置新內容後附加該事件。

所以附加事件每次AJAX調用我們使用。對

編輯您的代碼，因此

$(document).on('click', '.up_vote', function() { 
    var post_id = $(this).attr('postid'); 
    $.ajax({ 
     type: "POST", 
     data: { 
     'post_id': post_id, 
     'action': 'upvote' 
     }, 
     url: '<?php echo $url; ?>/includes/functions.php', 
     dataType: 'json', 
     success: function(response) { 
     if (response.ResponseCode == 200) { 
      $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*'); 
     } else { 
      alert(response.Message); 
     } 
     } 
    }); 
    }); 

    $(document).on('click', '.down_vote', function() { 
    var post_id = $(this).attr('postid'); 
    $.ajax({ 
     type: "POST", 
     data: { 
     'post_id': post_id, 
     'action': 'downvote' 
     }, 
     url: '<?php echo $url; ?>/includes/functions.php', 
     dataType: 'json', 
     success: function(response) { 
     if (response.ResponseCode == 200) { 
      $('#postbox_' + post_id).load('<?php echo $url; ?>/index.php #postbox_' + post_id + ' >*'); 
     } else { 
      alert(response.Message); 
     } 
     } 
    }); 
    }); 

    $(document).on('click', '#btnpost', function() { 
    var post = $("#post_feed").val(); 
    if (post == "") { 
     alert("This can't be empty."); 
     return false; 
    } else { 
     $.ajax({ 
     type: "POST", 
     data: { 
      'post_feed': post, 
      'action': 'post' 
     }, 
     url: '<?php echo $url; ?>/includes/functions.php', 
     dataType: 'json', 
     success: function(response) { 
      if (response.ResponseCode == 200) { 
      $("#post_feed").val(""); 
      $('#feed_div').load('<?php echo $url; ?>/index.php #feed_div'); 
      } else { 
      alert(response.Message); 
      } 
     } 
     }); 
    } 
    }); 
});

來源

2017-04-03 05:37:19 Sylvester

似乎現在正在工作，感謝您！ – Martin

您可以嘗試使用下面給出的代碼。

$(document).on("click",".up_vote",function() { 
    alert("click"); 
});

來源

2017-04-02 14:30:33

您好我認爲你缺少返回虛假或e.preventDefault（）;

return false;使瀏覽器取消發佈表單到服務器。

add return false or e.preventDefault（） ajax函數之後;

例如

$("#btnpost").click(function(e) { ///e here 
    var post = $("#post_feed").val(); 
    if (post == "") { 
     alert("This can't be empty."); 
     return false; 
    } else { 
     $.ajax({ 
     type: "POST", 
     data: { 
      'post_feed': post, 
      'action': 'post' 
     }, 
     url: '<?php echo $url; ?>/includes/functions.php', 
     dataType: 'json', 
     success: function(response) { 
      if (response.ResponseCode == 200) { 
      $("#post_feed").val(""); 
      $('#feed_div').load('<?php echo $url; ?>/index.php #feed_div'); 
      } else { 
      alert(response.Message); 
      } 
     } 
     }); 
    } 
    e.preventDefault(); //Here 
    /// or 
    return false; /// Here 

    });

來源

2017-04-02 14:46:24 HoangHieu

的$（document）。在（ '點擊'）事件應頁面上調用一次加載。無需在行添加中添加文檔更改。

您可以先解除事件綁定，然後再像

$(document).off("click", '.up_vote').on("click", '.up_vote', function() { 
     alert("done"); 
     // Code here... 
});

來源

2017-04-03 08:53:01

jQuery Ajax點擊不起作用，除非頁面被刷新

回答

相關問題