在jQuery中为动态链接元素添加动态href属性

时间:2014-09-25 18:26:37

标签: jquery wikipedia-api

我有一个项目,我使用维基百科的API来检索一些内容。我试图更新"点击此处阅读更多链接"动态,但我似乎没有得到它,我已经检查了我的代码。这是我的搜索功能:

searchEntry: function (entry)
    {
        var linker = "http://en.wikipedia.org/wiki/"+entry;
        var link = $('<div id="more" contenteditable="true"><p><a href="#" id="morelink">Click here</a> to read more.</p></div>');
        $("div#more a").attr("href", linker);
        console.log(link);
        $.getJSON(wikiSearch.wbase+"action=parse&format=json&prop=text&section=0&page=" + entry + "&redirects&callback=?", function(data)
        {   

            if (!data.error)
            {
                var markup = data.parse.text["*"];
                if (typeof markup !== "undefined")
                {
                    $("#entry").text(entry).show();
                    var blurb = $('<div id="articleText"></div>').html(markup);

                    // remove links as they will not work
                    blurb.find('a').each(function() { $(this).replaceWith($(this).html()); });

                    // remove any references
                    blurb.find('sup').remove();

                    // remove cite error
                    blurb.find('.mw-ext-cite-error').remove();
                    $('#article').html($(blurb).find('p'));

                    $("#article").append(link);
                    // console.log(markup);
                }
            }
            else
            {
                $("#warning").text(data.error.info).show();
            }
            $(".spinner").hide();
        });
        $("#article").show();
        // if($("#article").show())
        // {
        //  wikiSearch.showMore();
        // }
    },

3 个答案:

答案 0 :(得分:1)

首先,使用.prop而不是.attr(方法签名是相同的)

其次,当你试图操纵它的href时,a标签不存在于页面上,而不是它只作为字符串变量存在。当您将链接创建为变量时,请尝试设置链接的href属性:

     var hrefLink = "http://en.wikipedia.org/wiki/"+entry;
     var link = $('<div id="more" contenteditable="true"><p><a href=' + hrefLink  + ' id="morelink">Click here</a> to read more.</p></div>');  

答案 1 :(得分:0)

我相信它是因为jQuery $(&#34;&#34;)应该是一个元素选择器,并且不应该有任何HTML结构。 $(&#34; div#more a&#34;)无法找到任何东西,因为(据我所知)代码实际上并不在jQuery正在搜索的DOM中。你不能做这样的事情:

var link = '<div id="more" contenteditable="true"><p><a href="'+ linker + '" id="morelink">Click here</a> to read more.</p></div>';

然后将其附加到您的HTML。

答案 2 :(得分:0)

您的链接包含在变量link中但尚未附加到DOM,因此当您尝试搜索它时,使用$("div#more a")找不到任何内容,因为jQuery正在搜索HTML您的页面,而不是您动态添加到某个变量的HTML。

您有两种选择:

1)将链接放在页面的HTML中,而不是尝试动态创建它,因此您可以这样做:

var link = $('#more a');
link.attr('href', linker);

2)如果必须动态创建,请在创建时添加href属性,然后确保将其附加到DOM。类似的东西:

var linker = "http://en.wikipedia.org/wiki/" + entry;
var link = $('<div id="more" contenteditable="true"><p><a href="' + linker + '" id="morelink">Click here</a> to read more.</p></div>');

// The link is now only stored in the variable we created. 
// We need to add it to our page. You can replace 'body' with the parent element that the link should be added to.
$('body').append(link);