Question

是的，我是jquery和javascript的新手。我有一个页面，其中包含静态html和python生成的数据，这些数据通过ajax写入页面。我有一个jquery滑块，适用于页面中已有的静态html数据，但不适用于新更新的内容。我已经尝试将jquery滑块代码放在静态html页面以及外部javascript源页面中。两者都不起作用。只有当我将jquery滑块代码放在我的python脚本中并将新数据写入页面时它才会起作用，我真的不喜欢导入下一组动态数据时会发生什么。不知道我做错了什么......

jquery代码：

$(document).ready(function(){
  $(".noIbar").click(function(e){
    if (e.ctrlKey)
      {
        $(this).next(".panel").slideToggle("fast");
      }
  });
});

这是代码工作部分的屏幕截图。当用户持有控制键并单击第一个（静态html）行时，它可以工作，但是通过python脚本返回的两个第二行不起作用。我有一种感觉，这与如何调用jquery有关。

我通过body标签中的onload调用ajax脚本：

<body  onload="test();loadcontent();">

这里是'loadcontent（）'函数：

function loadcontent()
{
$(document).ready(function(){    
$.get('cgi-bin/content.py', function(data) {
    $("#content").append(data);
});
});
}

这是python脚本的确切输出：

<div class='noIbar' onclick="highlightLink(this);AddVar('1.2.840.113970.3.33.1.16671800.20120327.1134351')">
  <div class='data'>105630</div>
  <div class='data'>ISO_IR 100</div>
  <div class='data'>20120327</div>
  <div class='data'>135346.000</div>
  <div class='data'>00035MR120014044</div>
  <div class='endcap'>2681</div>
</div>
<div class='panel'>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.8.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.9.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.10.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.11.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.12.jpg"></div>
</div>

<div class='noIbar' onclick="highlightLink(this);AddVar('1.2.840.113970.3.33.1.14883629.20111109.1132327')">
  <div class='data'>121011</div>
  <div class='data'>ISO_IR 100</div>
  <div class='data'>20111109</div>
  <div class='data'>133143.000</div>
  <div class='data'>00035US110137393</div>
  <div class='endcap'>US OB</div>
</div>
<div class='panel'>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.8.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.9.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.10.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.11.jpg"></div>
  <div class='img'><img src="icon/1.2.840.113619.2.5.2431209.13665.1332882288.12.jpg"></div>

Answer 1

以下是您问题的解决方法：

$(document).ready(function(){    
    $.get('cgi-bin/content.py', function(data) {
        $("#content").append(data);
        $(".noIbar").click(function(e){
            if (e.ctrlKey)
            {
                $(this).next(".panel").slideToggle("fast");
            }
        });
    });
});

您在ajax调用之前添加了回调函数。在从python脚本获得响应后，您正在向DOM添加内容，添加的新内容将不会响应回调事件，除非您再次为新元素定义它们。

jquery滑块使用ajax返回的新数据时遇到问题

1 个答案: