Question

我有一个php模板。我们称之为buildElement.php。在我的应用程序的许多地方多次调用此元素。

我需要做的是将js函数附加到元素的创建中。

让我们说buildElement.php创建一些嵌套的div，其中一个具有类名veryImportantClass

我还有一个在项目中导入的js文件（脚本src ......你知道），在这个文件中我试图调整veryImportantClass函数的字体autoResizeText }

我的问题是这个函数autoResizeText不会在创建新元素时执行。

我不确定哪些页面使用veryImportantClass但是当它加载时我想知道并且我想将js函数附加到它。

到目前为止，我有$（document）.ready（）在页面加载时执行js，但如果动态创建的东西没有刷新，我就不会抓住它。

我可以使用jQuery事件吗？

[编辑]我不能发布整个php模板，因为它有自定义类和变量，我不能从他们来的地方开始解释但是这里是浏览器中没有变量的最终结果的例子

<div class='container>
  <a href="{somewhere}"> 
    <span class="veryImportantClass>Some text</span>
  </a>
</div>

这是我的js函数试图做的事情

function resizeElement (element) {
    let elementText = $(element).text();
    elementText = elementText.trim();
    if (elementText.length > 13) {
        element = $(element).css('font-size', '10px');
    }
    return element;
}

它检查文本中有多少个符号，如果有太多符号则会降低字体大小。

我还创建了另一个检查每个当前跨度并调用此

的函数

function autoResizeText() {
    console.log('I am resizing the text');
    let elements = $('.veryImportantClass');
    let result = [];
    for (let i = 0; i < elements.length; i++) {
        let element = elements[i];
        element = resizeElement(element);
        result.push(element);
    }
    return result;
}

到目前为止，这就是我让他们工作的方式

$(document).ready(autoResizeText());

我想要的是能够将resizeElement附加到每个span的课程veryImportantClass，或者当创建带有此元素的范围时，我想要调用autoResizeText()这将占用该课程的所有当前跨度并完成工作。

Answer 1

试试这个：

$(document).on('DOMSubtreeModified', function(e) {
    $(".veryImportantClass:not(.handled)").each(function() {
        $(this).addClass("handled");
        autoResizeText(this);
    });
});

当元素插入文档时，

DOMSubtreeModified触发。 .veryImportantClass:not(.handled)使用类autoResizeText选择未传递给.handled函数的所有元素。

Answer 2

您可以设置每秒执行一次该功能的间隔。但根本不推荐。 setInterval(function(){ //functionGoesHere }, 1000); https://www.w3schools.com/jsref/met_win_setinterval.asp
或者您可以在ajax call

element creation

或者您可以简单地在css文件中添加新的字体大小，如果所有页面上的字体大小更改都是全局的

将js函数附加到元素的创建

2 个答案: