Question

我正在开发一个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请求。

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交互

2 个答案: