如何在通過ajax動態創建元素時使用jquery的.on（）方法？

我有這樣一段代碼：如何在通過ajax動態創建元素時使用jquery的.on（）方法？

$(document).ready(function() { 
    $('.mostrar_usuario_link').on('click', function() { 
     $("#mostrar_usuario_dialog").dialog({ 
      modal:false 
     }) 
    }); 
})

這是類（.mostrar_usuario_link）的部分元素是不是有當文件準備好，因爲這些都是通過動態僅當的要求是AJAX創建。無論如何，這個對話從來沒有顯示過，我想知道是不是因爲這個。

順便說一下，.mostrar_usuario_link類中的元素集合是< a>標記，我使用DOJO來支持Ajax。

我可以得到任何幫助嗎？

來源

2012-06-05 Daniel Calderon Mori

相信與否，這*實際上覆蓋了*在文檔中......它被稱爲「委託」事件並取代委託（取代「現場」）。 – 2012-06-05 21:25:08

我會建議看看jQuery的ajax支持：http://api.jquery.com/category/ajax/ – N1ck

我想出瞭如何解決我的問題。由於我使用的是Dojo的錨標記（< sx：a>），因此它只執行自己的腳本。但是，您可以使用「afterNotifyTopics」屬性來指示您希望在響應後執行的腳本。

下面是HTML：

<s:url id="mostrar_usuario_url" action="mostrar_usuario.action"> 
    <s:param name="id_usuario" value="%{id_usuario}"/> 
</s:url> 
<sx:a cssClass="mostrar_usuario_link" id="mostrar_usuario_link_%{id_usuario}" targets="mostrar_usuario_dialog" href="%{mostrar_usuario_url}" afterNotifyTopics="lanzarCuadro"> 
    <s:property value="id_usuario"/> 
</sx:a>

這裏是JavaScript：

$(document).ready(function() { 
    dojo.event.topic.subscribe("lanzarCuadro", function() { 
     $("#mostrar_usuario_dialog").dialog({ 
      modal:true 
     }) 
    }); 
}

謝謝大家的支持。

來源

2012-06-06 01:57:02

下面是正確的用法：

$("body").on("click", ".mostrar_usuario_link", function() { 
    ... 
});

而不是body你可以使用任何mostrar_usuario_link父元素。

參考：

jQuery docs > on() > delegated-events approach

來源

2012-06-05 21:18:07 VisioN

+1 *僅僅是因爲提及'body'可以是「...的任何父元素」。使用更接近預期目標的父母將導致稍微更多（可能不明顯）如此有效的執行，但更重要的是，IMOHO爲事件提供了更好的界定範圍。 – 2012-06-05 21:21:17

我欣賞的幫助，但似乎並沒有工作。我應該提到，這套元素是< a >標籤，因爲我試圖用任何其他元素的方法，它的工作。 –

@DanielCalderonMori這很奇怪。實際上，單擊哪種元素沒有區別，這種方法應該與任何可點擊元素完美配合。 – VisioN

文檔元素是文檔的頭部可用之前裝載任何其他HTML，所以它是安全的，沒有附加的事件沒有等待準備好文件。

http://api.jquery.com/on/#direct-and-delegated-events

$("document").on("click", ".mostrar_usuario_link", function() { 
    ... 
});

而且我不知道，如果你已經這樣做了，但如果該元素是一個<a>標籤，你可能要preventDefault防止錨標記的默認操作。

$("document").on("click", ".mostrar_usuario_link", function(e) { 
    //Prevent Default action from link 
    e.preventDefault(); 
    ... 
});

來源

2012-06-05 21:20:06 N1ck

當使用AJAX工作，你必須重新分配一旦HTML的事件，你問的地方（異步）已準備就緒。如何做？請看：

$.ajax({ 
     url: '....', 
     success: someFunction 
    });

現在，你可能已經有someFunction，這是代碼：

function someFunction(){ 
    $('.mostrar_usuario_link').on('click', function() { 
     $("#mostrar_usuario_dialog").dialog({ 
      modal:false 
     }) 
    }); 
}

您可以在成功新的HTML，因爲你可能已經知道，通過數據參數。如需進一步參考，請參閱jQuery's .ajax documentation。

來源

2012-06-05 21:35:54 Ale

如何在通過ajax動態創建元素時使用jquery的.on（）方法？

回答

相關問題