通过jQuery在页面中加载内容-Codeigniter

Question

我有两个视图main.php和details.php。 在main.php中 ，有很多内容，并且在每个内容下都有一个“ 查看更多 ”按钮。 如果有人点击查看更多 ，则ajax调用将动态地从details.php加载其余内容，这将从数据库中获取内容ID的数据。 这是details.php中的列表样式视图。 在main.php的标头中，我的主脚本文件包含此代码段，以从details.php获取数据-

$('.view_more').click(function(e) {
  $.ajax({
  type: 'POST',
  url: '/path/to/my/controller/method',
  dataType: 'html',
  success: function (html) {
   $('#details_container').html(html);
  }
});
});

数据正在完美加载。 但是问题是在details.php中有一个添加内容按钮，以及已经动态加载的每个内容都无法正常工作。 内容添加脚本位于main.php中添加的main.js中。 但是我必须添加此特定的jQuery代码片段，以在details.php中添加内容，否则它将无法正常工作。 因此，每当单击更多视图时，它就会返回html数据以及用于添加内容的代码。 这根本是不希望的。

如何解决这个问题？ 请帮忙。 提前致谢。

这是添加内容的代码。

<script type="text/javascript">
$('.add_this').click(function(){

      var t = jQuery(this);
  var id_add = t.attr("id");
  var content_category_id = t.attr("rel");
  var add_content_id = id_add.substring(id_add.indexOf('_')+1);
  var content_creator_id = t.attr("data-clip-id");

  $.ajax({
            type: "POST",
            url: "/path/to/my/controller/method",
            data: add_content_id,
            cache: false,
            success: function(response){
                if(response)
                {
                    $("#"+id_clip).text("Clipped");
                }
            }
        });
        });
      </script>

我想再次添加，但是我能够添加内容，但是我必须将此代码段嵌入到我不想做的details.php中。 我需要从主脚本文件运行。

Answer 1

这应该工作：

$(document).on('click','.add_this',function(){
  var t = jQuery(this);
  var id_add = t.attr("id");
  var content_category_id = t.attr("rel");
  var add_content_id = id_add.substring(id_add.indexOf('_')+1);
  var content_creator_id = t.attr("data-clip-id");

  $.ajax({
        type: "POST",
        url: "/path/to/my/controller/method",
        data: add_content_id,
        cache: false,
        success: function(response){
            if(response)
            {
                $("#"+id_clip).text("Clipped");
            }
        }
    });
    });