直接在html(和树枝)中使用jquery

本文介绍了直接在html(和树枝)中使用jquery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 短版

通常，我通过编写xy.js并将其包含在html/twig中来包含jquery.然后，此文件使用ready()或也许使用load().

如果我直接在twig的scipt-tag中使用jquery，而不是-在某些情况下，直接在twig-file中的另一个script-tag中直接调用该函数，有什么缺点吗?

长版

解决问题时(如果您愿意，看看... )，我发现我需要一些非常基本的知识:

当通过自己的js文件包含jquery时，您可以执行以下操作:

$(document).ready()应该用于在加载DOM时执行操作-确定

如果js取决于资源，则可能会使用

$(document).load()，而这些资源可能无法在 ready()

处完全加载

但是，如果我直接在html中包含一些代码(或在我的情况下为小树枝)，该怎么办? IE.

... {% block subtitleRechts %} {% if app.user %} <span id="add"> <a href="{{ path('add') }}" alt="add Item"> <img height="20" src="{{ asset('bundles/myBundle/images/plus.png') }}"></a> </span> <script> $("#add a").each(function() { var url = $("#add a").attr("href"); var $dialog = $('<div class="modalerDialog"></div>'). dialog({ autoOpen: false, modal: true, width: 460 }); $(this).click(function() { $dialog.load(url, null, function (responseText, textStatus, XMLHttpRequest) { var title = $('#addPage').attr('title') $dialog.dialog('option', 'title', title); }).dialog('open'); return false; }); }); </script> {% if whatever %} $("#add a").trigger("click"); {% endif %} {% endif %} {% endblock %} ...

这应该在链接中添加一个ajax对话框，如果直接使用"任何"，则该链接将被执行.

这在本地有效，但我不知道是否有任何缺点(除了混合树枝，在一个文件中添加html的js).就我而言，还将包含一个js文件

建议.

解决方案

我猜一个缺点是难以维护代码.也许更好的解决方案是使用来自服务器端代码的单个标志创建模型，如下所示:

//this one goes to separate .js file function MyModel (){ this.Init = function () { $("#add a").each(function() { var url = $("#add a").attr("href"); var $dialog = $('<div class="modalerDialog"></div>'). dialog({ autoOpen: false, modal: true, width: 460 }); $(this).click(function() { $dialog.load(url, null, function (responseText, textStatus, XMLHttpRequest) { var title = $('#addPage').attr('title') $dialog.dialog('option', 'title', title); }).dialog('open'); return false; }); }); }(); this.TriggerClick = function(boolean) { if(boolean){ $("#add a").trigger("click"); } }; } //this one stays on the page var model = new MyModel(); model.TriggerClick({% whatever %});

Short Version

Normally, I include jquery by writing a xy.js an including it in html/twig. This file than uses ready() or maybe load().

Are there any disadvantages, if I use jquery directly in a scipt-tag in twig and than - in some case - call that function directly in an other script-tag directly in the twig-file?

Long Version

While working on a problem (if you like to look...), I found out, that I need some really basic knowing:

When include jquery via an own js-file, you can do:

$(document).ready() should be used to do things, when the DOM is loaded - OK

$(document).load() should be used, if js depends on resources, that may not be fully loaded at ready()

But what, if I include some code directly in the html (or twig in my case). I.e. that:

... {% block subtitleRechts %} {% if app.user %} <span id="add"> <a href="{{ path('add') }}" alt="add Item"> <img height="20" src="{{ asset('bundles/myBundle/images/plus.png') }}"></a> </span> <script> $("#add a").each(function() { var url = $("#add a").attr("href"); var $dialog = $('<div class="modalerDialog"></div>'). dialog({ autoOpen: false, modal: true, width: 460 }); $(this).click(function() { $dialog.load(url, null, function (responseText, textStatus, XMLHttpRequest) { var title = $('#addPage').attr('title') $dialog.dialog('option', 'title', title); }).dialog('open'); return false; }); }); </script> {% if whatever %} $("#add a").trigger("click"); {% endif %} {% endif %} {% endblock %} ...

This should add an ajax dialog to a link an in the case of 'whatever' directly execute it.

This works local, but I just don't know, if there are any disadvantages (beside mixing twig, html an js in one file). In my case, there will also be an included js-file

Thx in advice.

解决方案

I guess one disadvantage would be the difficulty to maintain the code. Perhaps the better solution would be to create a model, with single flags from server-side code like this:

//this one goes to separate .js file function MyModel (){ this.Init = function () { $("#add a").each(function() { var url = $("#add a").attr("href"); var $dialog = $('<div class="modalerDialog"></div>'). dialog({ autoOpen: false, modal: true, width: 460 }); $(this).click(function() { $dialog.load(url, null, function (responseText, textStatus, XMLHttpRequest) { var title = $('#addPage').attr('title') $dialog.dialog('option', 'title', title); }).dialog('open'); return false; }); }); }(); this.TriggerClick = function(boolean) { if(boolean){ $("#add a").trigger("click"); } }; } //this one stays on the page var model = new MyModel(); model.TriggerClick({% whatever %});