2 つのタブがある jquery 機能があります。
では、各タブがajaxclick呼び出しを行い、jsp ページを描画します。
2 番目のタブにはスライド トグルがあります。
私の問題は、最初にページが読み込まれたときに2番目のタブをクリックすると、スライドトグルが正常に機能することです。
最初のタブをクリックしてから 2 番目のタブをクリックすると、スライド トグルがすばやく開いたり閉じたりします。
この伝播を止める方法は?
イベント などを試しましたが.preventDefault()、うまくいきませんでした。 stopPropagation()die
私が試したコードは以下にあります。スライド トグル メソッドは 1 つの js ファイルであり、他の 2 つは別の js ファイルにあります。
jQuery(function() {
//$(".trigger1").on('click', function (e) {
$("#qstnlist_content").off('click', '.trigger1').on('click', '.trigger1', function(event) {
// $(".trigger1").die('click').live('click',function(event){
//if($(event.target).is('div.trigger1')){
//$("document").off('click', "#list_intrv_qstns").on('click', "#list_intrv_qstns", function (e) {
var str = $(this).find("span.imgplus").text();
if (str.indexOf("+") >= 0) $(this).find("span.imgplus").html("- ");
if (str.indexOf("-") >= 0) $(this).find("span.imgplus").html("+ ");
$(this).next("div.dispnone").slideToggle("slow");
/* if(event.preventDefault){ event.preventDefault()}
else{event.stop()};
event.returnValue = false;*/
event.stopImmediatePropagation();
event.stopPropagation();
return false;
});
});
$("#list_intrv_qstns").off('click').on('click', function(event) {
$("#qstnlist_content").removeClass();
$("#qstnlist_content").addClass('dispnone');
$("#qstn_content").removeClass();
$("#qstn_content").addClass('dispshow');
$("#qstnlist_content").off("click", ".trigger1");
event.stopImmediatePropagation();
$("#list_intrv_qstns_a").css('color', 'black');
$("#start_intrv_a").css('color', 'white');
$("#add_intrv_qstns_a").css('color', 'white');
$("#create_intrv_qstns_a").css('color', 'white');
$("#create_intrv_template_a").css('color', 'white');
var inputData = {
usrid: $(this).data("usrid"),
buddyId: $("#qstbuddyid").val()
}
$.ajax({
url: "listquestions",
dataType: "html",
data: inputData,
success: function(data) {
$("#qstn_content").empty().html(data);
},
error: function() {
alert('Issue with save. ');
}
});
// if(event.preventDefault){ event.preventDefault()}
// else{event.stop()};
//event.returnValue = false;
event.stopImmediatePropagation();
event.stopPropagation();
});
$("#list_intrv_qstns").click();
// $("#add_intrv_qstns").die('click').live('click', function(e){
$("#add_intrv_qstns").off('click').on('click', function(event) {
$("#qstnlist_content").removeClass();
$("#qstnlist_content").addClass('dispshow');
$("#qstn_content").removeClass();
$("#qstn_content").addClass('dispnone');
//$("#qstnlist_content").off("click",".trigger1");
$("#list_intrv_qstns_a").css('color', 'white');
$("#start_intrv_a").css('color', 'white');
$("#add_intrv_qstns_a").css('color', 'black');
$("#create_intrv_qstns_a").css('color', 'white');
$("#create_intrv_template_a").css('color', 'white');
var inputData = {
usrid: $('#usrid').val(),
buddyId: $("#qstbuddyid").val()
}
$.ajax({
url: "questions",
dataType: "html",
data: inputData,
success: function(data) {
$("#qstnlist_content").empty().html(data);
},
error: function() {
alert('Issue with loading add questions. ');
}
});
//event.stopPropagation();
event.stopImmediatePropagation();
event.stopPropagation();
//event.preventDefault();
// event.preventCapture();
//event.preventBubble();
// if(event.preventDefault){ event.preventDefault()}
//else{event.stop()};
//event.returnValue = false;
//event.stopImmediatePropagation();
});
Jsp:
<div class="Interviewprocess">
<form id="feedback_form" action="savefeedback" method="post">
<fieldset>
<legend>Interview Process</legend>
<input type="hidden" name="buddyBO.intrvBuddyId" value="${interviewModel.buddyBO.intrvBuddyId}">
<ul id="tabmenu" >
<li data-intrvbuddyid="${interviewModel.buddyBO.intrvBuddyId}" id="add_intrv_qstns"><a href="#" id="add_intrv_qstns_a" style="color:white">Add Questions</a></li>
<li data-intrvbuddyid="${interviewModel.buddyBO.intrvBuddyId}" id="create_intrv_qstns"><a href="#" id="create_intrv_qstns_a" style="color:white">Create Questions</a></li>
<li data-usrid="${hmEmpId}" id="list_intrv_qstns"><a href="#" id="list_intrv_qstns_a" class="active" style="color:black">Review Question List</a></li>
<!--<li data-intrvbuddyid="${interviewModel.buddyBO.intrvBuddyId}" id="create_qstns_template"><a href="#" id="create_qstns_template_a" style="color:white">Crt</a></li>-->
<li data-intrvbuddyid="${interviewModel.buddyBO.intrvBuddyId}" id="start_intrv"><a href="#" id="start_intrv_a" style="color:white">Start Interview</a></li>
</ul>
<div id="qstn_content" ></div><!--content-->
<div id="qstnlist_content" class="dispnone"></div>
</fieldset>
</form>
</div>