從Ajax加載的內容中加載內容

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>

輸出：

Answer 4

感謝您的回答，也很抱歉花了這么長時間回答。

確實，問題在於： 當從ajax內容調用時，它不會運行。

閱讀此內容后 ， 該問題將無法委托該事件。

這是未調用的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：對不起，我的英語