JQuery 添加元素需要在我的 js 之前再次添加 jquery 脚本答案

【问题标题】：JQuery add element needs jquery script to be added again just before my jsJQuery 添加元素需要在我的 js 之前再次添加 jquery 脚本
【发布时间】：2012-09-13 05:52:30
【问题描述】：

我正在尝试以下一段 JQuery 代码来动态添加元素。

场景： a）如果我在其中包含以下脚本和 jquery.min.js 将不起作用。 b）如果我在 body 和 jquery.min.js 中添加以下脚本仍然不起作用。 c) 如果我在 body 和 jquery.min.js 中添加下面的脚本，就在下面的 代码上方，那么它就可以工作。为什么会这样？

我还需要 jquery.min.js 以使 joomla 的其他功能正常工作。是否可以在头部和正文中添加 jquery.min.js。

我正在使用 jQuery v@1.8.1

请帮助我理解上述情况。

 <script type="text/javascript">
window.addEvent('domready', function() {
var count = 0;
$('p#add_field').click(function(){
count += 1;
$('#container').append(
'<strong>Link #' + count + '</strong><br />' + '<input id="field_' + count + '" name="fields[]' + '" type="text" /><br />' );
});
});
</script>

下面是动态添加的代码。

<div id="container">
        <p id="add_field"><a href="#"><span>&raquo; Add your favourite links.....</span></a></p>
    </div>

【问题讨论】：

标签： javascript jquery joomla

【解决方案1】：

您是否从某个涉及 MooTools 的地方获得了该代码？

试着用这个包装

jQuery(document).ready(function() {
  //do stuff
})

链接供您参考 http://davidwalsh.name/javascript-domready

所以结果可能是：

<script type="text/javascript">
    $(function() {//shorthand way of doing document.ready
        var count = 0;
        $('p#add_field').click(function(){
            count += 1;
            $('#container').append(
                '<strong>Link #' + count + '</strong><br />' + '<input id="field_' + count + '" name="fields[]' + '" type="text" /><br />' );
        });
    });
</script>

【讨论】：

我正在尝试为我的 joomla 网站开发一个插件。它确实有 mootool 和 joomla。你建议的那个对我有用。谢谢

【解决方案2】：

在实际脚本之前为 jQuery 添加包含 script 标记时它起作用的原因是因为脚本使用 jQuery 来执行它的工作。在 JavaScript 中，您可以按照加载顺序访问脚本的功能。

【讨论】：

【解决方案3】：

尝试以下方法：

$document =& JFactory::getDocument();
$document->addScript("jquery-1.8.1.min.js");
$js = " $(document).ready(function() {
    var count = 0;
    $('p#add_field').click(function(){
      count += 1;
      $('#container').append('<strong>Link #' + count + '</strong><br />' + '<input id="field_' + count + '" name="fields[]' + '" type="text" /><br />' );
    });
});";
$document->addScriptDeclaration($js);

【讨论】：

【解决方案4】：

在您的文档中：

<head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script>
        var count = 0;
        $(document).ready(function() {
            $('p#add_field').click(function(){
                count += 1;
                $('#container').append('<strong>Link #' + count + '</strong><br />' + '<input id="field_' + count + '" name="fields[]' + '" type="text" /><br />' );
            });
        });
    </script>
</head>

【讨论】：