Question

这里是我的ajax cal内容将显示的div

<div class="topics"></div>

这是我的ajax电话

$.ajax({
        type : "GET",
        data : {
            q : typedString
        },
        url : "/parent/childAjax?hideList=" + hideList,
        success : function(msg) {
            if (msg != '') {
                $(".topics").html(msg).show();
            }
        }
    });

这是childAjax action

中的后端代码

.......
......
StringBuilder output = new StringBuilder(); 
output.append("<li><a href='#' onclick='addTopic(this.id)' class='catClass ${count%2==0?'odd':'even'} ui-link'  id='${document.uniqueId}'>")
                    output.append("${document.name}")
                    output.append("</a>")
output.append("<span id='tick-${document.uniqueId}'><img src='${resource(dir:'images/mobile',file:'plus-icon.png')}' alt='' style='width:16px; height:16px' /></span></li>")

实际上我需要做的是当我点击<a>元素我的js函数被调用时，我正在使用.html替换image plus-icon.png和其他图像（＆＃34;替换图像代码＆＃34;）。一些如何（.html（））无法正常工作。

这里是响应数据样本......

<li><a href="#" onclick="addTopic(this.id)" class="catClass odd ui-link" id="551">Core Java</a><span id="tick-551"> <img src="http://192.168.0.105:8080/images/mobile/tick.png?v=0521" alt="" style="width: 16px; height: 16px"></span></li>

<li><a href="#" onclick="addTopic(this.id)" class="catClass even ui-link" id="776">Advanced JAVA</a><span id="tick-776"> <img src="http://192.168.0.105:8080/images/mobile/tick.png?v=0521" alt="" style="width: 16px; height: 16px"></span></li>

Answer 1

使用事件委派。这将确保为DOM加载时不存在的元素触发事件。绑定到静态父元素（在本例中为正文）。

$('body').on('click', '.catClass', function(){
     addTopic(this.id);
});

Answer 2

您可以通过jQuery的$ .live（）将事件绑定到动态加载的内容。

来自jQuery http://api.jquery.com/live/：

html（），append（）不能处理通过ajax调用的元素，删除工作正常

2 个答案: