フォームをロードしてブーストラップモーダルを介して提示するための次のjQueryソース(modalConnect())があります。基本的に、hrefタグのデフォルトの動作を防ぎ、代わりにajaxget呼び出しを送信します。これは正常に機能します。
次に、サーバーから受け取ったdomに別の.jsスクリプトタグを追加する必要があります。これは最初のクリックでも機能します。後続のクリックごとに、メソッドはすでに実行された回数+1回実行されます。これは非常に奇妙です。
したがって、最初のクリックで、コンソールに次のメッセージが表示されます。
関数が実行されました追加のJSが実行されました
大丈夫です。
2回目のクリック(同じまたは別のクリック-違いはありません)では、次のように表示されます。
関数が実行されました追加のJSが実行されました
関数が実行されました追加のJSが実行されました
これで、コンソールでテキストを合計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>
asdf
<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が含まれていることになってしまうと思いますが、これは実際には悪いことです。
私がそこでやったようにそれが正しいかどうかわからないので、私はこの投稿からのヘンドラ・ウジアからの説明に従いました。