how to refresh a 'div' anytime an element in the page is clicked - jquery

Question

i wanted to reload an element whenever there is a click event on any form element. can anyone help me with the jquery syntax? something like

function addClickHandlers() { $.publish('refreshDiv'); }

where the div's reloadTopic is set to refreshDiv

thanks

Answer 1

Click events bubble up, so you can just set the event on the form element:

$('#myForm').click(function () {
    $.publish('refreshDiv'); 
});

You could also use .delegate() to only catch clicks from certain elements within the form:

$('#myForm').delegate("input, select, textarea", "click", function () {
    $.publish('refreshDiv'); 
});

Answer 2

Add a handler to every element.

$('*').click(function () {
    $.publish('refreshDiv'); 
    return false; // to stop it from bubbling as we already handled it here.
});

Answer 3

Well, I can interpret your text in two ways:

1) execute $.publish on any element which is a children of a form element

$('form').children().click(function(){
   $.publish('refreshDiv');
});

2) execute $.publish on all form elements (like checkboxes, radio buttons, etc.)

$('form').find('input').click(function(){
   $.publish('refreshDiv');
});

Like Andy E. suggested, it has a better performance to delegate the click event, so less event handlers are bound.

3)

$('form').delegate('input', 'click', function(){
   $.publish('refreshDiv');
});

Answer 4

I dont have idea about publish and i never seen this kind of code in jquery but if u want to reload whole page then u can do follow thing

<button id="PageRefresh">Refresh a Page in jQuery</button>

<script type="text/javascript">

    $('#PageRefresh').click(function() {

              location.reload();

    });

</script>

and if u want reload particular div then i think u should use ajax in jquery and reload the html in div.

$.post("/page", frm.serialize(), function(data) {
                    $("#ReminderProjectCount").html(data);
            });