Running script with onclick event when only inside a particular div element

Question

I'm looking at running this script:

$(document).ready(function() {
    $('a').click(function(e) {
        var urlyep=(this)
        e.preventDefault();
        $("#content").load($(urlyep).attr('href'));
    });
});

This loads content from a local HTML file via a menu hyperlink into the #content div. It works great but I want to make it more specific so it only works when the click is made in the #menubar div.

Why is this tagged [java]? Java is *not* the same thing as ECMAScript. — nanofarad, Jul 17 '13 at 20:51
Try using onMouseOver="" on your DIV and call your script from there? — Malcolm, Jul 17 '13 at 21:02
Thanks Malcolm, thats the right track but my knowledge on this scripting is minimal. I guess i need to on MouseOut make the opposite of e.preventDefault() happen? — Ben, Jul 17 '13 at 21:25
or if mouseover and click within div then runscript. otherwise. do nothing. how would one write that? — Ben, Jul 17 '13 at 21:34
add i guess that wont be ideal for mobile devices as they dont have a mouseover command? — Ben, Jul 17 '13 at 21:36
For touch devices this might be of some help. http://stackoverflow.com/questions/4550427/prefered-alternative-to-onmouseover-for-touch — Malcolm, Jul 17 '13 at 21:52
Form what I have read you could use a click event instead of the onmouseover, most touch devices support it. — Malcolm, Jul 17 '13 at 22:08

score 0 · Accepted Answer · answered Jul 17 '13 at 21:39

0

Err… You mean $('#menubar a').click(…) ?

answered Jul 17 '13 at 21:39

instanceof me

38,520
3
31
40

1

This (http://stackoverflow.com/questions/6865910/what-does-a-space-in-a-jquery-selector-mean) could be helpful to those who want to use jQuery selectors the way this answer does. – Nondeterministic narwhal Jul 17 '13 at 22:07
1

Thanks narwhal, but that's pretty deterministic ;) – instanceof me Jul 18 '13 at 08:25

Malcolm · Answer 2 · 2013-07-18T00:50:59.760

        <script type="text/javascript">
        $(document).ready(function() {
        $('#menubar a').click(function(e) {
        var urlyep=(this)
        e.preventDefault();
        $("#content").load("yourexternalpage.html");
        });
        });
        </script>

        <div id="content" >new content will go here</div>
        <div id="menubar" >menubar</div>

If you have more than one link on the menu bar, I am assuming you have, each needing to load it's own content/page you could do something like the following.

        <script type="text/javascript">
        $(document).ready(function() {
        $('#menubar a').click(function(e) {
        var urlyep=(this.name);
        e.preventDefault();
        $("#content").load(urlyep);
        });
        });
        </script> 

        <div id="content" >new content will go here</div>
        <div id="menubar" ><a href="#" name="page1.php" >menubar link1</a>-<a href="#" name="page2.php" >menubar link2</a></div>

excellent, this is getting me on the right track.. now i just need to add an if command. if mouseover then run newcontent(), otherwise essentially it only functions properly once.. — Ben, Jul 17 '13 at 22:49

Running script with onclick event when only inside a particular div element

2 Answers2