javascript - jquery javascript - 将脚本标记添加到 dom 会导致奇怪的行为 - 多次调用方法

Question

我有以下 jQuery 源代码 (modalConnect()) 用于加载表单并通过 boostrap 呈现它 modal .它基本上阻止了 href 标签的默认行为，而是提交了一个 ajax get 调用。这很好用。

现在我必须向从服务器接收到的 dom 添加另一个 .js 脚本标记。这也适用于第一次点击，对于每次后续点击，该方法的执行次数是它已经执行的次数 + 1。这很奇怪。

所以对于第一次点击，我在控制台中收到以下信息:

function executed Additional JS executed

这很好。

对于第二次点击(同一个或另一个 - 没有区别)我收到以下信息:

function executed Additional JS executed

function executed Additional JS executed

现在在控制台中总共打印了 3 次文本，而我预计只打印了 2 次。

<script type="text/javascript">
    function modalConnect()
        {
            $(".editItem").click(function(ev) { // for each edit item <a>
                ev.preventDefault(); // prevent navigation
                var url = ($(this)[0].href); //get the href from <a>
                $.get(url, function(results){
                  var itemForm = $("#ajax_form_modal_result", results);
                  console.log("function executed");
                  //update the dom with the received results
                  $('#itemFormModal').html(itemForm);
                  //add a new js script to the document. Repeated method calling effect only occurs if I add the following two lines
                  scriptText = "console.log('Additional JS executed')";
                  appendScriptTag(scriptText);
                  //show a bootstrap modal with the loaded form
                  $("#itemFormModal").modal('show');
                }, "html");
                return false; // prevent the click propagation
            })
        }
</script>

阿斯达夫

 <script type="text/javascript">
    function appendScriptTag(scriptText)
    {
        //create a script tag and append it to the dom
        var script = document.createElement( 'script' );
        script.type = 'text/javascript';
        script.text  = scriptText;
        //the following lines seem to have no effect.
        //the "method called more often" effect is not influenced by these lines
        document.body.appendChild(script);
        document.body.removeChild(document.body.lastChild);
        delete UnusedReferencedObjects; // replace UnusedReferencedObject with any object you created in the script you load.
    }

</script>

此外，如果有人能向我解释如何正确删除我用 appendScriptTag() 添加的最后一个 js 脚本标签，我将非常高兴。我想我最终包含了多个 js，这实际上很糟糕。

不确定我在那里做的是否正确，我按照 Hendra Uzia 的解释来自这个 post .

Answer 1

一旦脚本被解析和加载，删除脚本标签将不会删除脚本。所以这就是为什么这些行没有效果。

如果您在整个代码中多次调用 modalConnect()，按钮上的事件监听器也会重复，因此一次单击将触发 5 个事件监听器，从而产生 5 条消息。可能是这样……