jQuery Events function once

Question

I have some widgets on my site that when you click the titles, the content within its block refreshes. It is working also, but the click function activates only once. After it fires, it is disabled allowing only one refresh. I need to remove the one-time limit. Here's the JS below.

<script>
    $(function(){   
        $("div#ft1").click(function() {  
            $("div#blk1").load("http://mediahood.net/widgets/feat/inc/blk-entertainment.php");
        }); 

        $("div#ft2").click(function() {  
            $("div#blk2").load("http://mediahood.net/widgets/feat/inc/blk-technology.php");
        }); 

        $("div#ft3").click(function() {  
            $("div#blk3").load("http://mediahood.net/widgets/feat/inc/blk-music.php");
        });

        $("div#ft4").click(function() {  
            $("div#blk4").load("http://mediahood.net/widgets/feat/inc/blk-sports.php");
        }); 

        $("div#ft5").click(function() {  
            $("div#blk5").load("http://mediahood.net/widgets/feat/inc/blk-lifestyle.php");
        }); 

        $("div#ft6").click(function() {  
            $("div#blk6").load("http://mediahood.net/widgets/feat/inc/blk-money.php");
        }); 
    });
</script>

::ANSWER:: This worked for me.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(function(){
        $("div#feat2").on("click", "div#ft1", function() {  
            $("div#blk1").load("http://mediahood.net/widgets/feat/inc/blk-entertainment.php");
        }); 

        $("div#feat2").on("click", "div#ft2", function() {  
            $("div#blk2").load("http://mediahood.net/widgets/feat/inc/blk-technology.php");
        }); 

        $("div#feat2").on("click", "div#ft3", function() {  
            $("div#blk3").load("http://mediahood.net/widgets/feat/inc/blk-music.php");
        });

        $("div#feat2").on("click", "div#ft4", function() {    
            $("div#blk4").load("http://mediahood.net/widgets/feat/inc/blk-sports.php");
        }); 

        $("div#feat2").on("click", "div#ft5", function() {   
            $("div#blk5").load("http://mediahood.net/widgets/feat/inc/blk-lifestyle.php");
        }); 

        $("div#feat2").on("click", "div#ft6", function() {  
            $("div#blk6").load("http://mediahood.net/widgets/feat/inc/blk-money.php");
        }); 
    });
</script>

I know its called event delegation. I just don't know much about it. — Tim Banon, May 09 '13 at 17:43
Are `div#ft_` children of `div#blk_`? If so, the event handlers bound to the `#ft_` elements may be lost after changing the contents of `blk_`. — Zhihao, May 09 '13 at 17:57
The answer was found here! [link](http://stackoverflow.com/questions/9944499/how-to-dynamically-rebind-jquery-objects) — Tim Banon, May 09 '13 at 18:21
Thx Zhihao! After reading my link I understood what you were saying. — Tim Banon, May 09 '13 at 18:22

jQuery Events function once

0 Answers0