Laravel 刀片：ajax 替换的 html 部分不与 jQuery 交互答案

【问题标题】：Laravel blade : ajax replaced html portion don't interact with jQueryLaravel 刀片：ajax 替换的 html 部分不与 jQuery 交互
【发布时间】：2018-05-14 12:37:22
【问题描述】：

我正在开发一个 Laravel 项目，但遇到了 Ajax 和 Blade 模板的问题。在我的场景中，我有几个标签（可以是 div、按钮或列表项），带有一个类 ajaxaction 和一个属性 data-route，如下所示：

      <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 请求，该请求返回一个 HTML 来替换之前的内容。在某些情况下，被替换的内容有一个带有 ajaxaction 类的标签，如下所示：

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

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

【问题讨论】：

如果您有时间，“事件委托”是这里必读的主题
使用 .on() 方法将点击事件委托给（未来）动态添加到 DOM 的元素：stackoverflow.com/questions/15420558/…

标签： javascript ajax laravel blade

【解决方案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') 不同，初始值仍然是值即使他们改变了它。

【讨论】：

从 jQuery 3.0 开始， .delegate() 已被弃用。从 jQuery 1.7 开始，它被 .on() 方法所取代，因此已经不鼓励使用它。 api.jquery.com/delegate
在这种情况下，您只需将函数委托更新为“on”并且仍然可以工作；）对吗？

【解决方案2】：

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

event-delegation

【讨论】：