Pass mouse event to function by using js click()

Question

I have one onclick as below

<div class="tablinks active" onclick="openmarket(event,this)" data-uid="1">

openmarket function like below

function openmarket(evt, obj) {
    var i, tabcontent2, tablinks2;
    tabcontent2 = document.getElementsByClassName("tabcontent2");
    for (i = 0; i < tabcontent2.length; i++) {
        tabcontent2[i].style.display = "none";
    }
    tablinks2 = document.getElementsByClassName("tablinks2");
    for (i = 0; i < tablinks2.length; i++) {
        tablinks2[i].className = tablinks2[i].className.replace(" active", "");
    }
    document.getElementById(obj.getAttribute('data-uid')).style.display = "block";
    evt.currentTarget.className += " active";
}

Here in this function I have passed 2 parameters,
1) event
2) object

now I try to click this div by JS like below.

$("div [data-uid='1']").click();

but it won't work because I guess parameter evt is not valid or mismatch from what it should be.

Can anyone help me ?

Thank you.

Edit I'm getting following error.

Cannot read property 'className' of undefined

and error line is evt.currentTarget.className += " active";

why don't you add a callback to the click and pass event and this to the openmarket function — SabirAmeen, Jun 19 '17 at 08:22
@SabirAmeen, clicking on div itself calling openmarket function, so, if I create a callback, it will be called again. Please correct me if I'm wrong. — Pranav Patel, Jun 19 '17 at 08:25
Are you getting any error in the console? Does it work when you actually click on the element instead of simulating a click programmatically? — Lennholm, Jun 19 '17 at 08:26
@MikaelLennholm, yes, If I click on div it works, but if I click using click() function, it won't — Pranav Patel, Jun 19 '17 at 08:29
This is expected behaviour as your not actually clicking the div but instead using jQuery click function to simulate the click. Both are different. This might help you https://stackoverflow.com/questions/11127908/difference-between-click-and-actually-clicking-a-button-javascript-jquery and yes `evt.target.className` will work in both cases — Manish, Jun 19 '17 at 08:32
@bRIMOs, my HTML is about 2400 lines of code, do I need to post here ? — Pranav Patel, Jun 19 '17 at 09:40

score -1 · Answer 1 · answered Jun 19 '17 at 08:42

-1

Your selector query is wrong

change $("div [data-uid='1']").click();

to $("div[data-uid='1']").click();

this will return a jqueryclick click event not a mouse click event

answered Jun 19 '17 at 08:42

npo

1,060
8
9

Jacques Bollosse · Answer 2 · 2017-06-19T08:48:34.460

You can use simple javascript :

It works well. I fthere is only one div, use and id instead of a class.

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>Insert title here</title>
</head>
<!--I wish to append it here-->
<body>

    <div  class="tablinks active uid1" onclick="openmarket(event,this)" 
   data-uid="1" style="height:30px;width:50px;background-color:red;">
    </body>
</html>

<script type="text/javascript">
function openmarket(evt, obj) {
    var i, tabcontent2, tablinks2;
    tabcontent2 = document.getElementsByClassName("tabcontent2");
    for (i = 0; i < tabcontent2.length; i++) {
        tabcontent2[i].style.display = "none";
    }
    tablinks2 = document.getElementsByClassName("tablinks2");
    for (i = 0; i < tablinks2.length; i++) {
        tablinks2[i].className = tablinks2[i].className.replace(" active", "");
    }
    document.getElementById(obj.getAttribute('data-uid')).style.display = "block";
    evt.currentTarget.className += " active";
}
var list=document.getElementsByClassName("uid1");
for(var i=0;i<list.length;i++){
    list[i].click();
}
</script>

Pass mouse event to function by using js click()

2 Answers2