jquery click function declaration evaluates the variable at runtime

Question

I'm trying to create a notification with the css and div in this answer .

But I need more than one notification, so I serialized the ids of the divs.

Problem is, when I declare the click function, the variable nname doesn't get evaluated - it's only evaluated when I click the dismiss button. So only last notification is dismissed.

How can I declare a function with the value of the variable 'nname'?

I found a similar post but it's about zsh.

nc = 0;
function show_notification(data){    
    nname = "notification_" + nc
    $('body').append('<div id="' + nname + '" class="notification" style="display: none;"><span class="dismiss"><a title="dismiss notification">x</a></span></div>');
    $('#' + nname).fadeIn("slow").append('some new information');
    $('#' + nname + ' .dismiss').click(function(){$("#" + nname).fadeOut("slow");});
    nc++;
}

I can not solve the main problem you described. Are you also looking for another solution? — Ali Sheikhpour, Dec 07 '21 at 11:08
The SO question you need is: [how do closures work](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) — freedomn-m, Dec 07 '21 at 11:09
could'n find any solution, so i need a solution not another solution. I need to define the function as function(){$"#notification_0).fadeOut('slow2);} — pi511, Dec 07 '21 at 11:11
However, in this case, you do not need an `id` and incremental IDs are a crutch that you will benefit from doing without. In this case, change to .appendTo then you'll have a reference to the new element without needing to re-select it. Event delegation would handle the dismiss, with use of `this` and DOM navigation. Given the limited code / no html, it's hard to be precise (edit: it's `.notification) — freedomn-m, Dec 07 '21 at 11:12
Yes, just realised that when copying to a fiddle - didn't see it as it was scrolled off the side — freedomn-m, Dec 07 '21 at 11:14

score 1 · Answer 1 · answered Dec 07 '21 at 11:21

Here's a solution to your issue. I've given the count of your notifications id's in your anchor tag and fetched the same to remove a particular notification.

nc = 0;
function show_notification(){    
    nname = "notification_" + nc
    $('body').append('<div id="' + nname + '" class="notification" style="display: none;"> <span><a title="dismiss notification" class="dismiss" data-id = "'+nc+'" >Close</a></span> </div>');
    $('#' + nname).fadeIn("slow").append('some new information');
    nc++;
}

  $(document).on("click",".dismiss",function() {
      var findid = $(this).attr('data-id');
      $("#notification_"+findid).fadeOut("slow");
  });

show_notification();
show_notification();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
</body>

Thank you, I totally forgot about $(this). $(this).parent().fadeOut('slow') did the trick. — pi511, Dec 07 '21 at 11:37

score 1 · Accepted Answer · answered Dec 07 '21 at 11:22

The issue is that the variable nname is not unique to each time you call show_notification - by not adding let/var/const it becomes a global variable, so when you click the 1st [x] the variable has already been changed to point to the most recent.

While there are ways to handle this, you can remove the need for an incremental ID by using .appendTo to give you a variable containing the new content then use jquery methods on that variable.

var newDiv = $("your html").appendTo("body");
newDiv.fadeIn();

Within the click handler, use this and DOM navigation to close the selected popup.

....click(function() { 
    $(this).closest(".notification").fadeOut();
});

function show_notification(data) {
  var newDiv = $('<div class="notification" style="display: none;"><span class="dismiss"><a title="dismiss notification">x</a></span></div>')
    .appendTo("body");
  newDiv.fadeIn("slow").append('some new information:' + data);
  newDiv.find(".dismiss").click(function() {
    $(this).closest(".notification").fadeOut("slow");
  });
}

// Add some notifications
show_notification("1");
setTimeout(() => show_notification("two"), 500);

.dismiss { color: red; margin-right: 0.5em; border: 1px solid #FCC; cursor: pointer }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Thank you, good explanation with timeouts and styles., I didnt know about "appendto". That'll stand in hand. (you also didnt miss 'data' :) — pi511, Dec 07 '21 at 11:42

jquery click function declaration evaluates the variable at runtime

2 Answers2