[RESOLVED]I am trying to execute a function for one div, but it executes it for the others as well. What am I doing wrong?

I am trying to create a global function for when I click on a div to do something only for that particular div, not all divs.  How do I do that?

I have tried the following, but it does it for other divs as well. What am I doing wrong?

$(function () { $('div').mousedown(function () { $(this).draggable();
return false; }) return false; })

Hi,

$("div") selects all the element having this tag name (that is all div elements). Your perhaps want $("#myDiv") to select a div with a particular id.

See  http://api.jquery.com/category/selectors/ for details (for now you are using the "element" selector). You likely want the "id selector" instead.

I appreciate your response. I am trying to keep from having to add code to the aspnet controls such as "onClientClick"…. and just have one function that is called whenever someone clicks on a div. The interesting thing is that if I run the function and
do an alert($(this).attr(‘id’)); I get the id of the div I clicked. But when if I create a hiddenfield and add this id it, I get all the others as well. . I thought there may be a way to stop the function from executing beyond the div I clicked on.

Below is a simple click event wired to all divs on the page.

    <script type="text/javascript">
        $(document).ready(function () {
            $('div').on('click', function () {
                console.log(this);
            });
        });
    </script>

Clicking a div writes the div including all content to the console.    Press F12 to open developer tools and find the console.

CSS classes are a great way to wire up JQuery event handlers and maintain unique IDs.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQuery</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            /*
            $('div').on('click', function () {
                console.log(this);
            });
            */
            $('.MyBehavior').on('click', function () {
                console.log(this);
            });
        });
    </script>
</head>
<body>
    <div>Item 1
        <p>My stuff</p>
    </div>
    <div>Item 2</div>
    <div class="MyBehavior">Test</div>
    
</body>
</html>

You can even create your own attributes…

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JQuery</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            /*
            $('div').on('click', function () {
                console.log(this);
            });
            
            $('.MyBehavior').on('click', function () {
                console.log(this);
            });
*/
            $('div[data-attribute=clickable').on('click', function () {
                console.log(this);
            });
        });
    </script>
</head>
<body>
    <div>Item 1
        <p>My stuff</p>
    </div>
    <div>Item 2</div>
    <div class="MyBehavior">Test</div>
    <div data-attribute='clickable'>Attribute</div>
            
</body>
</html>

Hi JAYHAWKER,

JAYHAWKER

But when if I create a hiddenfield and add this id it, I get all the others as well.

If you don’t mind, please post related code above the sentence above, so that I can test it in my side.

Best Regards,

Kevin She.

Leave a Reply