jquery clickable div

Question

hi,

<div class="clickme"> click here </div>

I want to make that div clickable and it should trigger following function:

<script type="text/javascript">
$(document).ready(function(){
    $("#generate").click(function(){
        $("#quote p").load("script.php");
    });
});
</script>

how can I make that work?

Answer 1

Give the div the ID generate or any other (of course reasonable) ID to uniquely select it:

<div id="someid" class="clickme"> click here </div>

<script type="text/javascript">
$(document).ready(function(){
    $("#someid").click(function(){
        $("#quote p").load("script.php");
    });
});
</script>

Note that an ID has to be unique throughout the document.

You can also just use the class to select the element, but this will select any element with this class and bind the handler to all of these:

$(document).ready(function(){
    $(".clickme").click(function(){
        $("#quote p").load("script.php");
    });
});

Read the documentation about selectors, especially ID and class selectors.

Answer 2

Either give the <div> an id of generate:

<div id="generate">

or replace #generate by .clickme in the JS:

$('.clickme').click(function() {
    // ...
});

This is pretty trivial. To learn more about using jQuery, I warmly recommend to go through their tutorials. If you prefer a book, then I recommend jQuery in Action.