Добавление динамического атрибута href в элемент динамической ссылки в jQuery

Question

У меня есть проект, в котором я использую API Wikipedia для извлечения некоторого содержимого. Я пытаюсь обновить «нажмите здесь, чтобы прочитать больше ссылок» динамически, но я, похоже, не получаю его, и я проверил свой код. Вот моя функция поиска:

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(); 
     // } 
    }, 

Answer 1

Ваша ссылка, содержится в переменной 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); 

Answer 2

Я считаю, что это потому, что JQuery $ («») должен быть селектор элемента и не должны иметь каких-либо HTML структуры в нем. $ («div # more a») не может найти ничего, потому что (насколько я могу судить), что код на самом деле не находится в DOM, где находится jQuery. Не могли бы вы сделать что-то вроде этого:

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

Затем добавьте это в свой HTML.

Answer 3

Во-первых, использовать .prop вместо .attr (метод подписи тот же)

Во-вторых, тег не существует на странице, когда вы пытаетесь манипулировать его HREF, а = это только существует как строковая переменная. Попытайтесь установить 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>');