Question

我正在使用javascript＆amp;动态添加<script>代码每当按下按钮时jQuery进入我的html文件。所有内容都被正确添加，但只有两个.click jQuery操作函数中的一个正在运行。我似乎无法弄清楚为什么。控制台没有错误。我确保在正确的位置使用了\'和\"。

$('#classBox').append('<tr id=\"' + tempCHAR + tempNUM + '\">' 
                + '<td>' 
                    + '<i id=\"' + tempCHAR + tempNUM + '\" class=\"icon-remove-sign\">'
                    + '</i> '
                    + '<a id=\"' + tempCHAR + tempNUM + '\"" href=\"https://cms.psu.edu/section/default.asp?id=' + urlHOLDER + '\" target="framehidden">' 
                        + tempYEAR + ': ' + tempCHAR + tempNUM + ', Section ' + tempSEC 
                    + '</a>'
                + '</td>'
            + '</tr>'
            + '<script>'
                + '$(\'#' + tempCHAR + tempNUM + '\').click(function() {'
                    + '$(\'tr\').remove(\'tr#' + tempCHAR + tempNUM + '\');'
                + '});'
                + '$(\'a#\'' + tempCHAR + tempNUM + ').click(function() {'
                    + '$(\'#framehidden\').attr(\'src\', $(\'a\', this).attr(\'href\')));'
                + '});'
            + '</script>');

缩进只是让我更容易阅读我正在做的事情。这不是问题吗？

如果那太难以阅读，那么这是正常的看法。

$('a#'IST130).click(function() {
    $('#framehidden').attr('src', $('a', this).attr('href')));
});  
$('#IST130').click(function() {
    $('tr').remove('tr#IST130');
});

我有30个其他.click功能都可以完美运行，但我无法弄清楚这里出了什么问题。任何提示？

Answer 1

您的错误（或至少其中一个）就在这一行：

+ '$(\'a#\'' + tempCHAR + tempNUM + ').click(function() {'

只需在那里添加一个额外的单引号，需要移到$()块的末尾：

+ '$(\'a#' + tempCHAR + tempNUM + '\').click(function() {'

Answer 2

由于.append()是即时的（即同步），因此绝对不需要将这些内容放在<script>标记中。相反，试试这个：

$('#classBox').append('<tr id=\"' + tempCHAR + tempNUM + '\">' 
            + '<td>' 
                + '<i id=\"' + tempCHAR + tempNUM + '\" class=\"icon-remove-sign\">'
                + '</i> '
                + '<a id=\"' + tempCHAR + tempNUM + '\"" href=\"https://cms.psu.edu/section/default.asp?id=' + urlHOLDER + '\" target="framehidden">' 
                    + tempYEAR + ': ' + tempCHAR + tempNUM + ', Section ' + tempSEC 
                + '</a>'
            + '</td>'
        + '</tr>');
$('#' + tempCHAR + tempNUM).click(function() {
    $('tr').remove('tr#' + tempCHAR + tempNUM);
});
$('a#' + tempCHAR + tempNUM).click(function() {
    $('#framehidden').attr('src', $('a', this).attr('href')));
});

话虽如此，您的代码可能无效。 ID必须是唯一的。我会让你以任何最适合你的方式解决这个问题，但是是的。

Answer 3

在最后的示例中，您有$('a#'IST130)。很确定应该阅读$('a#IST130）`

要更正它，请将该ID的生成更改为：

'$(\'a#' + tempCHAR + tempNUM + '\')...

此外，由于您是动态添加元素，因此它们的单击事件可能无法正确绑定，具体取决于代码执行的确切时间。

您可以使用jquery on为永久元素上的事件设置绑定。在这种情况下，#classBox看起来是个不错的选择。它可能看起来像这样（这将在一个普通的脚本块中，在你的动态内容之外：

$('#classBox').on('click','a',function () {
    $('#framehidden').attr('src', $('a', this).attr('href')));
});

$('#classBox').on('click',function () {
    $(this).closest('tr').remove();
});

注意：完全未经测试 - 仅供参考！

Answer 4

修复语法错误后，还要确保在append()代码运行之前未附加点击事件。

我无法分辨代码在实际页面中运行的顺序 - 如果您在附加单击事件之前附加元素，则元素可能尚不存在。您可以使用jQuery的delegate方法来确保为所有元素调用事件，无论它们何时被附加到DOM。

例如：

$('body').delegate('.anchorClassName', 'click', function(e){});

Javascript做的是预期的

4 个答案: