jquery click function declaration evaluates the variable at runtime-CodePudding

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   '"  style="display: none;"><span ><a title="dismiss notification">x</a></span></div>');
    $('#'   nname).fadeIn("slow").append('some new information');
    $('#'   nname   ' .dismiss').click(function(){$("#"   nname).fadeOut("slow");});
    nc  ;
}

CodePudding user response：

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  style="display: none;"><span ><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>

CodePudding user response：

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   '"  style="display: none;"> <span><a title="dismiss notification"  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>