在新包含的html片段上应用jquery和js函数

Apply jquery and js functions on newly included html fragment

本文关键字：jquery js 函数 应用 新包含 html 片段      更新时间：2023-09-26

我有一组类似的函数:

$("selector").hide();
$("selector2").on("click", dosomething);
...
// much more here

在一些用户交互之后，我想在页面中包含一些新的html片段。这个片段可以很短，也可以很长，可以包含任何内容(我无法预测片段中的内容)。

我想再次应用那些jquery/js函数，但只在新的片段部分，而不是整个页面。我该怎么做?(可以随意使用jQuery)

编辑:

想象一下选择器document.getElementBy…，此选择器一次只针对一个文档工作。

假设我们已经有另外10个元素传递了selector2，并且绑定了onclick。现在我们正在添加新的html片段，其中可能包含传递selector2的新元素。我想做的是改变所有jquery方法的document，然后我想把这个新文档放在页面中，让它以某种方式共存…不确定文档是否是个好主意。

EDIT2:

我已经有了:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/libs/jquery-2.1.4.min.js" type="text/javascript"></script>
        <script src="js/main.js" type="text/javascript"></script>
        <script type="text/javascript">
            function dosomething() {
                alert("My wife hates me!");
            }
        </script>
    </head>
    <body>
        <div class="clickable">click me</div>
        <div class="clickable">click me</div>
        <div class="clickable">click me</div>
    </body>
</html>

main.js含量:

$(".clickable").on("click", dosomething);
document.querySelectorAll("div.clickable").style.color = "#333";
// this file is very long and you are forbidden to touch it

现在我从某个地方调用ajax，我得到一些html片段包含这个(或任何其他):

<div class="clickable">click me too</div>

我想调用:

$("body").append(htmlFragment);

但首先我想在片段上以某种方式调用main.js，但仅限片段和我禁止触摸main.js文件(最大是在函数中包装文件的内容);

如果你想应用与上面相同的选择，除了在新的片段中，那么下面的工作。

$('#newSection selector1').hide();
$("#newSection selector2").on("click", dosomething);

显然，#newSection需要被替换为新片段的选择器。

编辑

根据你的评论。您可以将相关的jquery封装在一个函数中，并使用上下文选择器将其应用于该节。

var apply_jQuery = function(context){
    // Add all relevant jQuery that needs to be reapplied here. eg
    $('selector', context).click(/*do something*/);
}
apply_jQuery($(document)); // Will apply to full document.
var newFragment = $('#newFragment');
apply_jQuery(newFragment); // Will apply to fragment only.

如果我理解对了你的问题，你可以把你新添加的片段包装在一些容器中，然后用jQuery选择它并应用函数，像这样:

$('.container').hide();

这是相当微不足道的虽然…也许你有更复杂的东西或者只是不同的东西，而你没有提到这个?

如果我正确理解了您的问题，您应该希望将事件绑定到动态生成的元素。在你的例子中，这些元素有一个名为"clickable"的类

如果这是你想要实现的，那么使用下面的代码

$('body').on("click",".clickable", function(){
    //do something...
})

上面的代码将一个事件绑定到包含在主体中的类clickable的任何元素，即使它是在调用该脚本后动态生成的，并且您不需要再次调用main.js文件。

首先我考虑的是文档，但这项技术仍处于试验阶段。

然后我做了这个讨厌的把戏，我不确定它的性能。首先，我从主体(或包装器)中分离所有元素，然后添加新的html片段。再次调用main函数后，选择器只能找到当前元素，事件绑定不会复制到正常元素。然后我再次分离这个片段并放回origin html。它可以同时用于jquery和本机选择器。

这不是最好的解决方案，但很简单，也是我找到的唯一一个。也许有人会找到更好的。 

// function that applies js only for new html
function reaplyJS(newHtmlFragment) {
  var tempContent = $("#wrapper").children();
  tempContent.detach();
  $("#wrapper").append(newHtmlFragment);
  main();
  newHtmlFragment.detach();
  $("#wrapper").append(tempContent);
}
// this is test part
function appendNewClickable() {
  var htmlFragment = $('<div class="clickable">click me</div>');
  reaplyJS(htmlFragment);
  $("#wrapper").append(htmlFragment);
}
var click = 0;
function writeConsoleMessage() {
  click++;
  console.log("click number: " + click);
}
function main() {
  $(".append").on("click", appendNewClickable);
  $(".clickable").on("click", writeConsoleMessage);
  var nodes = document.querySelectorAll("div.clickable");
  for (var i = 0; i < nodes.length; i++) {
    nodes[i].style.color = "#FF3232";
  }
}
$(main);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="append">append new clickable element</div>
  <div class="clickable">click me</div>
  <div class="clickable">click me</div>
  <div class="clickable">click me</div>
</div>

相关文章：