Is there a script in the WP native jQuery library to handle click events? (example enclosed)

I'm running a self-hosted WordPress 4.1 (not multi-site) installation using BuddyPress 1.5 with the WPMU DEV "Studio" theme.

I'm using a static page for my front page, and on the top of it I have a graphic embedded in a DIV tag.

I'm calling a script from the jquery library on the microsoft site to handle a click event to detect when I am touching that particular DIV. Here's the script I'm calling, followed by the function I'm invoking it with:

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.5.2.min.js">
</script>

<script type="text/javascript">
$('html').click(function (e) {
  var x = e.target.id;
  var y = document.getElementById(x).tagName;
  if (y.toLowerCase() == 'div') {
    // alert("I am a DIV.");
    if (x== 'DESKTOP') {
      alert("You've touched the DESKTOP div.");
    }
  }
});
</script>

This is an example of the DIV object I would embed in the page to test it with:

<div id="DESKTOP">
<P>I can click anywhere</P>
<P>within this DIV and</P>
<P>the click will be recognized</P>
</div>

This works fine on it's own on a vanilla WP page. The problem that I run into is that it interferes with processes on my front page. (It may be knocking heads with the ContentViews Pro plugin I use from another developer, which invokes a lightbox through the native jquery libraries on my web site.

I know it's not a good idea to call jquery from an external domain (as I do from Microsoft in the example above) since the libraries are already included in the base WordPress install, and that it's especially problematic if it's calling a different version. The problem I'm running into is that this particular jquery script does not appear to be part of my WP install, and I don't have enough expertise to recognize the part of it that my code is drawing on to know if I can invoke it through one of the jquery scripts that is already bundled with WP.

Can anyone tell me if there is a way to do what I am trying to do without going outside of the base WP installation? I've been scratching my head on this for days, going through lines of library code until my eyes are crossed.

Thanks a bunch for any wisdom someone might be able to share!

Sue.

  • Ash

    Hello @Sue

    Welcome to WPMU community!

    I hope you are well today and thanks for asking the question.

    I can see in your theme, you already have latest jquery included that comes with the native wordpress installation.

    So, you can just add your own script in your theme's footer.php after wp_footer(). Also, in your above script you are adding very older version of jquery, it's not safe any more to use. So, just add your custom script in footer.php:

    <script type="text/javascript">
    $('html').click(function (e) {
      var x = e.target.id;
      var y = document.getElementById(x).tagName;
      if (y.toLowerCase() == 'div') {
        // alert("I am a DIV.");
        if (x== 'DESKTOP') {
          alert("You've touched the DESKTOP div.");
        }
      }
    });
    </script><script type="text/javascript">
    $('html').click(function (e) {
      var x = e.target.id;
      var y = document.getElementById(x).tagName;
      if (y.toLowerCase() == 'div') {
        // alert("I am a DIV.");
        if (x== 'DESKTOP') {
          alert("You've touched the DESKTOP div.");
        }
      }
    });
    </script>

    Let me know if it works, or feel free to let us know if I understood it wrong.

    Cheers
    Ash

  • Sue

    Hi there, Ash! Thanks a bunch for another quick reply. I really appreciate it.

    I realize this is an old jQuery script, which is why I don't want to use it. My question is basically this: is what I am calling on handled in another part of the jquery library?

    If I simply put my function in as you suggested (which I have) it does not work. If I load it in and call the jquery-1.5.2.min.js script, it does work. I don't want to call it for obvious reasons, but what are my alternatives?

    The jquery-1.5.2.min.js script is not the same as jquery.js nor does my function work without it.

    What is the equivalent of jquery-1.5.2.min.js now? What part of what comes bundled with WP replaces this? There is no obvious direct replacement.

    It's my lack of knowlege about the jquery library that leaves me unable to solve this.

    Thanks again, very much.
    Sue.

  • Ash

    Hello @Sue

    There is no equivalent of jquery 1.5.2 version. There are lots of thing changed in the latest version.

    I have got an idea (I think I missed something in my above reply, sorry for that). Please add the following in your footer:

    <script type="text/javascript">
    jQuery(function($) {
    $('html').click(function (e) {
      var x = e.target.id;
      var y = document.getElementById(x).tagName;
      if (y.toLowerCase() == 'div') {
        // alert("I am a DIV.");
        if (x== 'DESKTOP') {
          alert("You've touched the DESKTOP div.");
        }
      }
    });
    });
    </script>

    Please let me know if it works.

    Cheers
    Ash

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.