jQuery工具提示在AJAX表單提交後停止工作

我正在使用jQuery和jQuery UI。當我提交表單（$（「＃compareit」）。submit（function（e）{...）時，我在頁面上隱藏了我的左列和右列，並顯示了表單提交的AJAX結果。使用一些簡單的工具提示，工具提示在提交表單之前工作正常......提交之後，他們停止工作，我假設這是因爲我正在更改DOM。我有太多的代碼發佈，所以這裏是功能，如果代碼會有幫助，我會很高興地發佈它（下面）jQuery工具提示在AJAX表單提交後停止工作

提交表單，做一個阿賈克斯調用隱藏右/左欄我的頁面在頁面上顯示結果工具提示停止工作

問題提示是： $（'。tTip'）。betterTooltip（{speed：150，delay：300}）;

$(document).ready(function(e) { 

    positions = new Array ('8' , '9'); 
    positions_num = 7; 
    position_list = new Array(positions_num); 

    $("#tabsP").tabs(); 
    $("#tooManySelected").hide(); 
    $('.tTip').betterTooltip({speed: 150, delay: 300}); 

    $("#compareit").submit(function(e){ 
     $("#topsection").hide(); 
     $("#tabsP").hide(); 
     $("#bottomWrap").hide(); 
     $("#error").html(''); 
     $("#leftcolumn").hide(); 
     $("#rightcolumn").hide(); 
     $("#yearChooser").hide(); 
     e.preventDefault(); 
     var queryString = $('#compareit').serialize(); 
     var dataString = queryString + "&count=" + totalselected; 
     //alert(dataString); 

     $.ajax({ 
      type: 'GET', 
      url:'newmlbcompare2p.php', 
      cache: false, 
      data: dataString, 
      dataType : 'html', 
      success:function(result){ 
       $('#ajaxDiv').html(result); 
      } 
     }); 
     return false; 
    }); 

    $("#accordionRight").accordion({ 
     collapsible: true, 
     autoHeight: false 
    }); 
    $("#accordionLeft").accordion({ 
     header: "h3", 
     autoHeight: false, 
     navigation: true, 
     collapsible: true, 
     active: true 
    }) 

    $(".btn-slide").click(function(){ 
     $("#ppanel").slideToggle("slow"); 
     $(this).toggleClass("active"); return false; 
    }); 

});

來源

2012-04-05 relyt

代碼將是有益的 – Michal 2012-04-05 00:30:12

@Michal。我已經發布了相關的代碼。 – relyt 2012-04-05 00:49:01

@relyt：ajax內容的工具提示不起作用嗎？ – Shyju 2012-04-05 00:49:47

如果ajax裏面的工具提示不起作用，因爲您在綁定您的方法以啓用工具提示後加載的內容。所以工具提示功能不知道添加了新的元素。因此，您可能需要再次將該函數綁定到加載的新內容。同樣的道理適用於你的其他活動也：您可以在阿賈克斯成功事件數據

$.ajax({ 
      type: 'GET', 
      url:'newmlbcompare2p.php', 
      cache: false, 
      data: dataString, 
      dataType : 'html', 
      success:function(result){ 
       $('#ajaxDiv').html(result); 
       $('.tTip').betterTooltip({speed: 150, delay: 300}); 

      } 
});

編輯加載後也這樣做。就像你說的，你的點擊事件不工作，你可能需要改變使用jQuery on

變化

$(".btn-slide").click(function() { //do stuff });

到

$("#yourContainerDiv").on("click", ".btn-slide", function(event){ //do stuff });

上會處理潮流元素和未來元素（就像你從ajax加載的那樣）。在

http://api.jquery.com/on/

jQuery是從jQuery的1.7+版本起。如果你使用的是以前的版本，你需要使用jQuery live方法

來源

2012-04-05 00:54:32 Shyju

這完全是（「.btn-slide」）。click（function（）above。再一次，這只是隱藏在頁面上的隱藏div，沒有AJAX內容爲此 – relyt 2012-04-05 01:00:43

@relyt：我更新了我的答案。 – Shyju 2012-04-05 01:05:10

好吧，你是男人。我使用的是1.7.1，因此「on」對我來說效果很好。非常感謝您的時間和快速響應！ – relyt 2012-04-05 01:14:47

謝謝你的回答，Shyju。我有同樣的問題，UI Tooltip和您的解決方案幫助：

<script> 
$(document).ready(function() { 
    $("#dialog-window").dialog({ 
    autoOpen: false, 
    width: 540, 
    height: 200, 
    modal: true, 
    buttons: [ 
    { 
    text: "OK", 
    click: function() { 
    $(this).dialog("close"); 
    }, 
} 
] 
}); 
    $("#dialog-link").on("click", function(event){ 
    // post data 
    $.post('submit.php', $('#formName').serialize(), function(data){ 
    $('#content-container').html (data); 
    // add tooltip   
    $('.tooltipClassName').tooltip({ 
    position: { 
    my: "center bottom-10", 
    at: "center top", 
    using: function(position, feedback) { 
    $(this).css(position); 
    $("<div>") 
    .addClass("arrow") 
    .addClass(feedback.vertical) 
    .addClass(feedback.horizontal) 
    .appendTo(this); 
    } 
    } 
    }); 
}); 
$("#dialog-window").dialog("open"); 
event.preventDefault(); 
}); 
}); 
</script>

來源

2014-09-05 10:21:43

jQuery工具提示在AJAX表單提交後停止工作

回答

相關問題