0

<script>每当按下按钮时，我都会将带有 javascript 和 jQuery 的标签动态添加到我的 html 文件中。一切都正确添加，但只有两个.clickjQuery 动作函数中的一个在工作。我似乎无法弄清楚为什么。控制台没有错误。我确保我在正确的地方使用\'过。\"

$('#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功能都可以完美运行，但我无法弄清楚这里出了什么问题。有什么提示吗？

4

4 回答 4

2

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

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

只需有一个额外的单引号需要移动到$()块的末尾：

+ '$(\'a#' + tempCHAR + tempNUM + '\').click(function() {'
于 2013-04-02T19:08:00.070 回答
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 必须是唯一的。我会让你以最适合你的方式解决这个问题，但是是的。

于 2013-04-02T19:11:16.037 回答
1

在你最后的例子中，你有$('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();
});

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

于 2013-04-02T19:10:11.193 回答
0

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

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

例如：

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

于 2013-04-02T19:11:49.443 回答