我已经将以下内容剥离回裸骨,我传递更多属性来调用我的ajax中的specfic信息. $(document).on("click", ".call", function(){ $.ajax({type: "POST",url: "showform.asp",dataType:"html",data: {},cache: false,success:functio
$(document).on("click", ".call", function(){ $.ajax({type: "POST",url: "showform.asp",dataType:"html",data: {},cache: false,success:function(result){ $("#LoadArea").html(result); }}); }); $(document).on("click", ".cbcall", function(){ $.ajax({type: "POST",url: "select.asp",dataType:"html",data: {},cache: false,success:function(result){ $("#LoadArea").html(result); }}); });
上面是我正在使用的Jquery的示例,下面是我正在使用的html.
<p class="call">click here to load</p> <div id="LoadArea"></div>
单击此处加载单击时,showform.asp页面内容将加载到LoadArea div中. showform.asp的内容如下
<div class="call"> <input type="checkbox" class="cbcall"> </div>
问题是如果我点击复选框(.cbcall),事件就会冒泡并加载showform.asp.我是Jquery的新手,所以我想知道如何停止事件冒泡,但仍然能够检查并取消选中showform.asp中加载的复选框.
我试过返回false;但这不会勾选复选框.
任何人都能指出我正确的方向吗?
更新 – 调整代码以匹配建议
我更新了我的起始页以匹配Nicola的代码(thanx Nicola)
$(document).ready(function(){ $(".call").on("click", function(e){ //check that event is originated by a <p class="call"> element if($(e.target).is('.call')){ alert('.call actioned'); $.ajax({type: "POST",url: "showform.asp",dataType:"html",data: {},cache: false,success:function(result){$("#LoadArea").html(result);}}); } }); $( ".call").on("click", ".cbcall", function(e){ alert('radio actioned'); //Stop immediate propagation e.stopImmediatePropagation(); $.ajax({type: "POST",url: "select.asp",dataType:"html",data: {},cache: false,success:function(result){$("#LoadArea").html(result);}}); }); }); <p class="call">click here to load</p> <div id="LoadArea"></div> <!-- additonal code below here --> <div class="call"> <input type="checkbox" class="cbcall"> </div>
此外,我已将showform.asp的内容添加到页面底部,并向Jquery添加了一些警报.
当我点击< p class =“call”>时点击此处加载< / p>或者< input type =“checkbox”class =“cbcall”>在初始页面功能工作,警报触发和ajax加载但是当我只使用< p class =“call”>点击此处加载< / p>并尝试从ajax加载的showform.asp页面调用相同的调用没有任何反应.
问题是你在文档级别捕获事件,所以它已经冒出来了!编辑 – 由于第二个元素是动态添加的,你应该这样做
$(".call").on("click", function(e){ //check that event is originated by a <p class="call"> element if($(e.target).is('p.call')){ $.ajax({type: "POST",url: "showform.asp",dataType:"html",data: {},cache: false,success:function(result){ $("#LoadArea").html(result); }}); } }); $( ".call").on("click", ".cbcall", function(e){ //Stop immediate propagation e.stopImmediatePropagation(); $.ajax({type: "POST",url: "select.asp",dataType:"html",data: {},cache: false,success:function(result){ $("#LoadArea").html(result); }});