在 Ajax 中初始化 JQuery 滑块

Question

我正在使用 JQuery 滑块，它可以很好地加载到我的标题中。我想它是用以下代码初始化的：

$(function() {
$( "#slider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
});
$( ".selector" ).on( "slidecreate", function( event, ui ) {
} );

我正在调用一个 Ajax 函数，该函数使用标记响应另一个 JQuery 滑块

<div id="slider"></div>

这里是 Ajax 函数：

<!-- Ajax Function for removing an users favorites-->
function ShowFavoritesAjax(url,cfunc,userID)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("user_id=" + userID);
}


function ShowFavorites(userID)
{
ShowFavoritesAjax("ajaxPHP/users/ajaxShowFavorites.php",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("userFav").innerHTML=xmlhttp.responseText; 
    } else { 
    document.getElementById("userFav").innerHTML='<img src="images/ajax-loader.gif">';
   }
  },userID,bandID);
}

所以我猜我需要在我的一个 Ajax 函数中“初始化滑块”。所以我通过修改返回来尝试这个：（我只是在显示响应文本之前完整地粘贴了初始化函数）

function ShowFavorites(userID)
{
ShowFavoritesAjax("ajaxPHP/users/ajaxShowFavorites.php",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
 $(function() {
$( "#slider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
});
$( ".selector" ).on( "slidecreate", function( event, ui ) {
} );
    document.getElementById("userFav").innerHTML=xmlhttp.responseText; 
    } else { 
    document.getElementById("userFav").innerHTML='<img src="images/ajax-loader.gif">';
   }
  },userID);
}

如果有人能发现我的问题并有解决办法，我将不胜感激。

谢谢。

Answer 1

试试这个：

function ShowFavorites(userID)
{
   ShowFavoritesAjax("ajaxPHP/users/ajaxShowFavorites.php",function()
   {
         if (xmlhttp.readyState==4 && xmlhttp.status==200)
         {
             document.getElementById("userFav").innerHTML=xmlhttp.responseText; 
                $( "#slider" ).slider({
                    orientation: "horizontal",
                    range: "min",
                    min: 0,
                    max: 100,
                    value: 60,
                    slide: function( event, ui ) {
                          $( "#amount" ).val( ui.value );
                  });

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

              $( ".selector" ).on( "slidecreate", function( event, ui ) {
              });
            } else { 
               document.getElementById("userFav").innerHTML='<img src="images/ajax-loader.gif">';
           }
  },userID);
}

我在这段代码中所做的更改：

• 将document.getElementById("userFav").innerHTML=xmlhttp.responseText;行移到最先执行。
• 删除$(function() {

原因：

• $(function() { 在文档准备好时触发（在这种情况下不是）。
• 当您执行 $.slider 之类的代码时，html 尚未插入到文档中 => 因此您必须颠倒顺序。