0

I'm using JavaScript to create an anchor tag for a popover. The code works perfectly. But then I need to get the anchor tag's id in a different function, but it's not working for some reason. I'm just learning JavaScript / JQuery so I think it may be some fundamental scope issue I don't know yet.

The code where I create the anchor tag:

$(document).ready(function(){
    $('.image-options').each(function() {
        var icon_id = $(this).attr('id');
        a_tag_id = icon_id + "a";

        var popString1 = "";
        popString1 = popString1 + "<a href=“” class='options collect-modal' id='" + a_tag_id + "'>Add to collection <span class='icon-pop'><i class='fa-solid fa-plus'></i></span></a>";
        $(icon_id).attr('data-bs-title', popString1);
    });
});

This is the other code:

$(document).ready(function() {
    $(".collect-modal").click(function(e) {
        e.preventDefault();
        var buttonId = $(this).attr('id');
        alert(buttonId);
    });
});

Please let me know if any additional info/code is needed.

EDIT: As suggested, I suspect it's an issue of direct vs delegated event handlers. Also, as requested I'm sharing an MRE:

$(document).ready(function(){
    $('.image-options').each(function() {
        var icon_id = $(this).attr('id');
        a_tag_id = icon_id + "a";

        var popString1 = "";
        popString1 = popString1 + "<a href=“” class='options collect-modal' id='" + a_tag_id + "'>Add to collection <span class='icon-pop'><i class='fa-solid fa-plus'></i></span></a>";
        $(icon_id).attr('data-bs-title', popString1);
    });
});

$(document).click(".collect-modal", function(e) {
    e.preventDefault();
    var buttonId = $(this).attr('id');
    alert(buttonId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="card border-0 overflow-hidden">
   <div class="position-relative">
      <img class="card-img-top card-img-bottom" data-bs-toggle="modal" data-bs-target="#myModal" src="https://picsum.photos/200" id="125img">
   </div>
   <a class="btn-opt btn-sm image-options" data-bs-container="body"
    data-bs-toggle="popover" data-bs-placement="left" data-bs-html="true" id="125i"><i class="fa-solid fa-ellipsis"></i></a>
</div>

I changed the second code as suggested by @disinfor and at least it does something now, but now I get an undefined error.

br1saturno
  • 21
  • 5
  • 1
    Can you share enough of your (relevant, "*[mcve]*") HTML, JavaScript, and CSS that we can reproduce your problem? I suspect that you'll need event-delegation (see this question: https://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on and its answers), but without seeing your code running I'm not entirely sure. – David Thomas Dec 18 '22 at 17:01
  • Welcome to Stack Overflow! It would help us if you gave us the basic HTML you have. There is a stack snippet tool `<>` that you can add your HTML/CSS/JS to so we have a runable example. However, I'm guessing if you look in your dev console, you'll see an error that `.collect-modal` is undefined. If you add something to the DOM, you need to have your second function look there instead. – disinfor Dec 18 '22 at 17:02
  • Try using `$(document).click('.collect-modal', function(e)....` instead in your second function. Also, you don't need to use two `document ready`, just put everything in one of them `$(document).ready(function() { both functions here })` - Another edit: the thing to remember, is that your JS runs on document load - so your second function (as in my comment above) doesn't know that `.collect-modal` exists, since you adding those to the DOM **after** the JS has already been executed. – disinfor Dec 18 '22 at 17:08
  • This line: `$(document).click(".collect-modal"` runs *before* this line: `$('.image-options').each(function()` - so at the time you try to wire up your events, the elements don't exist. Use event delegation or add your event handler *after* you add the elements (ie, inside the doc.ready). – freedomn-m Dec 18 '22 at 17:40

0 Answers0