0

ツールチップ画像とajax呼び出しリクエストの起動に使用している次のjqueryコードがあります。ポイントまでは正常に機能していますが、divがajaxによってリロードされた後、実際に新しいajax呼び出しを開始できるはずのツールチップとスライダーが機能しなくなります。

// Load this script once the document is ready
$(document).ready(function () {

 // Get all the thumbnail
 $('div.thumbnail-item').mouseenter(function(e) {

  // Calculate the position of the image tooltip
  x = e.pageX - $(this).offset().left;
  y = e.pageY - $(this).offset().top;

  // Set the z-index of the current item, 
  // make sure it's greater than the rest of thumbnail items
  // Set the position and display the image tooltip
  $(this).css('z-index','15')
  .children("div.tooltip")
  .css({'top': y + 10,'left': x + 20,'display':'block'});

 }).mousemove(function(e) {

  // Calculate the position of the image tooltip   
  x = e.pageX - $(this).offset().left;
  y = e.pageY - $(this).offset().top;

  // This line causes the tooltip will follow the mouse pointer
  $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});

 }).mouseleave(function() {

  // Reset the z-index and hide the image tooltip 
  $(this).css('z-index','1')
  .children("div.tooltip")
  .animate({"opacity": "hide"}, "fast");
 });



$(function() {
    $( ".slider" ).slider({
        value:0,
        min: 0,
        max: 100,
        step: 10,
        change:function(e,ui){

            var domain = document.domain;
            var count = $('#amount').val();
            var $parent = $(this).closest(".product_box");
            var modul_title = $("h4", $parent).text();
            alert(count);
            $.ajax({

                url:'index/ajax',
                data:{mod_title:modul_title, domain:domain, count:count},
                cache:true,
                datatype:'html',
                success: function(response) {
                     if(response.status = modul_title) {
                         $parent.fadeOut();
                         $parent.html(response).fadeIn(); 

                     } else 

                     {
                          alert("something went wrong!");
                     }

                   }

                });

        },
        slide: function( event, ui ) {
            $( "#amount" ).val(ui.value );
        }



    });
    $( "#amount" ).val( $( "#slider" ).slider( "value" ) );
});

});
4

1 に答える 1

3

オブジェクトが動的に作成されている場合は、.delegate() のようなものを使用する必要があります。

http://api.jquery.com/delegate/

または、さらに良いことに、新しい .on メソッド:

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

次に、イベントをバインドすると、機能するはずです。例えば:

 $('div.thumbnail-item').on('mouseenter',function(e){ ...
于 2012-05-27T17:57:31.340 に答える