【问题标题】:How to manipulate appended content? Jquery如何操作附加内容? jQuery
【发布时间】:2010-11-20 00:09:48
【问题描述】:

我和 Jquery 在一起。

我将 html 附加到这样的 div 中:

$('div#byletter').append(createLettersHtml());

createLettersHtml 函数创建一个包含在“div.ln-letters”中的字母(链接)列表。然后我想像这样调用'onclick'事件:

$('.ln-letters a').click(function(){

    alert(123);

});

但是什么也没发生!如果我在任何未附加的 html 元素上调用 onclick ,它可以工作,但它不适用于附加的内容。我做错了什么?

更新:

这里是完整的代码:

$(document).ready(function(){

$.fn.listnav = function(options) {
        var opts = $.extend({}, $.fn.listnav.defaults, options);
        var letters = ['_', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '-'];
        var firstClick = false;
        opts.prefixes = $.map(opts.prefixes, function(n) { return n.toLowerCase(); });

$('div#byletter').append(createLettersHtml());      

function createLettersHtml() {
                var html = [];
                for (var i = 1; i < 27; i++) {
                    if (html.length == 0) html.push('<a class="all" href="#">ALL</a><a class="_" href="#">0-9</a>');
                    html.push('<a class="' + letters[i] + '" href="#">' + ((letters[i] == '-') ? '...' : letters[i].toUpperCase()) + '</a>');
                }
                return '<div class="ln-letters">' + html.join('') + '</div>' + ((opts.showCounts) ? '<div class="ln-letter-count" style="display:none; position:absolute; top:0; left:0; width:20px;">0</div>' : ''); // the styling for ln-letter-count is to give us a starting point for the element, which will be repositioned when made visible (ie, should not need to be styled by the user)
            }



    };

    $.fn.listnav.defaults = {
        initLetter: '',
        includeAll: true,
        incudeOther: false,
        includeNums: true,
        flagDisabled: true,
        noMatchText: 'No matching entries',
        showCounts: true,
        cookieName: null,
        onClick: null,
        prefixes: []
    };


    $('.ln-letters a').click(function(){

        alert(123);

});

});

【问题讨论】:

  • 您能否粘贴完整的 js,以便我们更好地了解发生的情况。从您提供的有限信息中无​​法判断/。

标签: javascript jquery append


【解决方案1】:

您可以尝试使用.live。你可以把它挂在 doc ready 中。 .live 适用于附加内容。

$(function(){
   $('div.ln-letters a').live('click', function(){
      alert(123);
   });
});

【讨论】:

  • 带有.live的活动内容根本不出现
  • 不确定您的意思。挂钩事件与内容附加无关。您能否发布 createLettersHtml 函数,以便我们更好地了解您的尝试。
  • @Andersson83 - redsquare 是对的,这就是解决方法。另外,请确保您使用的是 jQuery 1.3 或更高版本,就像添加 live 时一样。
  • 嗯,是的,原因是我的 jquery 早于 1.3,现在 1.3 可以工作,但是对不起,缩小的 jquery 1.3 的大小是 55KB,而我的压缩包是 29KB ......我认为在移动到 1.3 之前两次。我想没有 live() 就没有办法做到这一点?
  • @karim - >1.3 的好地方。应该强制在问题中指定版本!
【解决方案2】:

您必须在附加 HTML 内容后设置 click evet。你确定你正在这样做吗?此外,使用 Firebug 或 Opera Dragonfly 来检查你的 JS 是否有任何错误。

【讨论】:

  • 我是一个js新手,所以我其实不明白你说的AFTER是什么意思。嗯,是的,它在这个附加字符串之后: $('div#byletter').append(createLettersHtml());
  • After 表示先追加内容,然后设置点击事件。如果你之前这样做,元素不存在并且脚本会中断。
  • usoban 的假设是正确的:在添加节点之前添加处理程序。在对 createLettersHtml 的调用返回后附加节点,同时在该函数中设置点击事件。您需要将其移至追加调用之后的行。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2011-01-08
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-05-18
  • 1970-01-01
相关资源
最近更新 更多