Question

我可以使用Ajax将内容加载到我的项目中，但内容也对同一函数进行Ajax调用。但这些电话不起作用。

$(function cargar_ajax(){
$(".call_cuerpo").on("click",function(){
    var content_id = $(this).data("id")
    //~ console.log(content_id)
    $.ajax({
        url: "/get_content?content_id="+content_id,
        }).done(function(res) {
            $( '.contenido_ajax' ).html(res);
            });
    });
});

我读到你必须在加载内容后调用该函数，而不是如何或在何处调用。

这是我在HTML中的div：

<div class="contenido_ajax"></div>

正在进行的Ajax调用：

<li><a href="#" class="call_cuerpo" data-id="1"><small>Load ajax content</small></a></li>

如果加载了Ajax，则此调用无效：

<li><a href="#" class="call_cuerpo" data-id="{{ item.content_id }}@{{ item.book_id }}">{{ item.code }}</a></li>

代码是从Ajax调用加载的。

注意：我正在使用：Django 1.6 + bootstrap 3.2 + html 5

提前致谢。

Answer 1

因为.call_cuerpo元素被动态附加到DOM，所以需要使用委托事件处理程序：

$('.contenido_ajax').on('click', '.call_cuerpo', function() {
    // rest of your code...
});

Answer 2

如果我说得对，那么点击事件在通过ajax加载时不会被执行？尝试：

$("document").on("click", ".call_cuerpo",function(){ ...

用于点击事件

Answer 3

尝试在我的本地apache服务器中测试下面的代码。 event.preventDefault（）以防止链接元素发生默认功能。

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(".call_cuerpo").click(function(event){
           // alert("I am working");
            event.preventDefault();

        var content_id = $(this).data("id")
        //~ console.log(content_id)
        $.ajax({
            url: "./get_content.php?content_id="+content_id
        }).done(function(res) {
            $( '.contenido_ajax' ).html(res);
        });

    });
</script>

输出： ajax_html_load_output

Answer 4

感谢您的回答，很抱歉花了这么长时间才回答。

确实问题是：从ajax内容调用时它不会运行。

阅读this和this后，问题无法委派该事件。

这是未调用的html代码（以前从ajax加载）：

<a class="call_cuerpo" data-id="A0300306@1" href="#">03.06</a>

必须在此django template.html中加载：

{% block book_content %}
<div class="contenido_ajax"></div>
{% endblock book_content %}

我简化了这样的功能：

$(function load_ajax(){
    $(".call_cuerpo").on("click", function( event ){
        event.preventDefault();
        var content_id = $(this).data("id")
        // console.log(content_id)
        $( ".contenido_ajax" ).load( "/get_content?content_id="+content_id );
    });
});

我尝试了几种语法，事件发生了。

我试试：

$(function load_ajax(){
    $(".call_cuerpo").on("click", "contenido_ajax", function( event ){
        event.preventDefault();
        var content_id = $(this).data("id")
        console.log(content_id)
        $( ".contenido_ajax" ).load( "/get_content?content_id="+content_id );
    });
});

和

$(function load_ajax(){
    $(".contenido_ajax").on("click", ".call_cuerpo", function( event ){
        event.preventDefault();
        var content_id = $(this).data("id")
        console.log(content_id)
        $( ".contenido_ajax" ).load( "/get_content?content_id="+content_id );
    });
});

但这没有任何作用。我做错了什么？

PD：抱歉我的英文

从加载Ajax的内容加载内容

4 个答案: