1

I have a div like

div class="ncf-container nfc-bottom-right">
<div class="ncf info">
<button>X</button>
<p class="nfc-message">New Notification</p>
</div>
</div>

how to apply onclick on div using class name(Javascript)?

3
  • What this onclick will do? Commented Jul 28, 2018 at 10:54
  • Use the jQuery class selector .theClassName Commented Jul 28, 2018 at 10:54
  • @brk this is the part of show notification , and onclick is for open popup on notification Actually i can not use any function on this div then how to create click event (click on this div tag) Commented Jul 28, 2018 at 10:57

3 Answers 3

0

Here is how to add event Using Jquery and javascript.

var classname = document.getElementsByClassName("nfc-bottom-right");
var myFunction = function() {
    alert('clicked javascript way');
};
for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('click', myFunction, false);
}


$(".nfc-bottom-right").on("click",function(){
  alert('Jquery way');
})
.nfc-bottom-right{
 border:2px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="ncf-container nfc-bottom-right">
<div class="ncf info">
<button>X</button>
<p class="nfc-message">New Notification</p>
</div>
</div>

Sign up to request clarification or add additional context in comments.

Comments

0

jQuery

$('info').on('click', function() { // ... your code to execute onClick });

Vanilla JS

document.querySelector('.info').addEventListener('click', function() { // ... your code to execute onClick });

Comments

0

You can specify onclick behavior for a div tag, via class name in the following way:

<!-- This is your div, with custom class name -->
<div class="yourClassName">
Div Content
</div>

<script>
     document.querySelector('.yourClassName')
     .addEventListener('click', function() {

       // This is the logic that is run when the div with yourClassName class is clicked
       alert('the div was clicked');
     })
</script>

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.