Laravel blade : ajax 替换 html 部分不与 jQuery 交互

Question

我正在开发一个 Laravel 项目，我遇到了 Ajax 和 Blade 模板的问题。在我的场景中，我有几个带有 class ajaxaction 和属性 [ 的标签（可以是 div、按钮或列表项） =37=]，像这样：

      <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5106">
      <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5105">
      <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5104">
      <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5103">
      <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5102">

和一个包装我将替换的内容的标签：

<div class="content">

</div>

在这个页面我有这样的脚本：

$('.ajaxaction').click(function () {
  ajaxURL = $(this).attr('data-route');
  $.get( ajaxURL, function(data) {
    $('.content').html(data);
  })
  .fail( function(jqXHR, textStatus, errorThrown) {
    $('.content').html(textStatus + ' ' + errorThrown);
  });
});

正如我所料，每次单击标签时，ajax 都会发送一个 GET 请求，该请求 return 一个 HTML 来替换之前的内容。在某些情况下，替换的内容有一个带有 class ajaxaction 的标签，如下所示：

<div class="content">
    ...
    <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5199">
    ...
</div>

但是点击这个标签不会发送任何 ajax 请求。

Answer 1

您可能需要考虑这个 jquery ajax 解决方案。

来自您现有的代码。

    $('.ajaxaction').click(function () {
  ajaxURL = $(this).attr('data-route');
  $.get( ajaxURL, function(data) {
    $('.content').html(data);
  })
  .fail( function(jqXHR, textStatus, errorThrown) {
    $('.content').html(textStatus + ' ' + errorThrown);
  });
});

<div class="content">
    ...
    <button type="button" class="ajaxaction" data-route="http://localhost/webora/public/d/5199">
    ...
</div>

到这个。因为您已经将按钮包装在 div 中。你创建一个这样的脚本。

$('div.content').on(".ajaxaction","click",function(){
   var _btn = $(this);  
   $.ajax({
      url : _btn.data('route'),
      success : function(data){
          //your success data here

      },
      error : function(jqXHR,textStatus,thrownError){
        console.log(jqXHR); 
     } 
   })
});

不要使用 attr('data-xxxx')，因为一旦它们更改了您的 data-xxxx 的值，它就会反映到您的代码中，而运行代码的更改与 data('xxxx'), 即使他们改变它，初始值仍然是该值。

Answer 2

我将我的问题标记为已回答，因为@Chay22 和@Mehdi Alipour 在他们的评论中提供的解决方案正是我需要知道的。

event-delegation

Laravel blade : ajax 替换 html 部分不与 jQuery 交互

Laravel blade : ajax replaced html portion don't interact with jQuery

javascript

ajax

laravel

blade