0

So I have an object in my code and I use js to add the properties of the object to an array named rec based on users interaction. then I use a function named unRec to get unique elements of the array. Then I add the values returned by unRec to the HTML. Then I use jquery to wrap each of the values in anchor tags. So the code is basically like this

obj= {
    0: "<span>module1</span>",
    1: "<span>module1</span>",
    2:"<span>module1</span>",
    3:"<span>module2</span>", 
    4:"<span>module2</span>", 
    5:"<span>module3</span>",
    6:"<span>module3</span>",
    7:"<span>module3</span>",
    8:"<span>module3</span>",
    9:"<span>module4</span>"
}
   function unRec(arr){
                preRec = [];
                    for (j of arr){
                        if (preRec.indexOf(j)=== -1) {
                                                    preRec.push(j);
                                            }
                            }
                            return (preRec);
            }
Recom.innerHTML = unRec(rec);

$('#congrat #recom span').wrap('<a href="modue1.html" class="disp"></a>')

Now am unable to select the created anchors. Hence this function doesn't work

 $('#congrat #recom .disp').click(function(e) {
    var url = $(this).attr('href') + '#' + $(this).text();   
    $('#module').html('loading...).load(url); e.preventDefault(); 
 });

I have tried to use find to select the anchors but it still doesn't work. This is the test

    var t = $('#congrat #recom').find ('a').length;
    console.log(t);

The HTML is basically like this:

<div id="congrat">
    <span id="recom"></span>
</div> 
<div id="module">click on one of the modules above<div>

Please provide a solution to select the created anchors. Thanks in advance

Peter Orji
  • 23
  • 10
  • You've provided plenty of code, which is good - can you also include `unRec` - ideally add a snippet (edit + `[<>]`) with enough code to demonstrate the issue. See https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do – freedomn-m Mar 12 '21 at 08:44
  • Are you sure the `a`s are being added? `$('#congrat #recom span').wrap` won't do anything to `
    ..nothing..
    ` **edit**: I see the "unrec" is the bit that's populating #recom     – freedomn-m Mar 12 '21 at 08:57
  • I've included the unRec function though am sure its not responsible for the inability to select the anchors – Peter Orji Mar 12 '21 at 08:58
  • So the question is, is this code `$('#congrat #recom .disp').click(function(e)` run before or after the `unRec` code? – freedomn-m Mar 12 '21 at 09:00
  • If before, then you'll need event delegation, change to `$("#congrat #recom").on("click", ".disp", function...` see https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – freedomn-m Mar 12 '21 at 09:01
  • The wrap works because the each of the values returned by unRec are displayed as anchors ( blue underlined text) and they lead to the Page specified in the href contrary to the e.preventDefault(); that's suppose to apply to them – Peter Orji Mar 12 '21 at 09:03
  • It runs after the unRec because the links are already displayed and its quite far above the click handler – Peter Orji Mar 12 '21 at 09:06
  • Thanks the on method solved it – Peter Orji Mar 12 '21 at 09:17

0 Answers0