Refresh only partial view in MVC4

Question

I'm having a little bit of trouble with refreshing a partialview on mvc4, here is the code:

    <div id="partialViewDiv"></div>

    <input type="button" id="firstPartialLink" value="Change Div"/>
    <input type="button" id="secondPartialLink" value="Change Div"/>

    <script type="text/javascript">
        $(function() {
            $("#firstPartialLink").click(function() {

                $("#partialViewDiv").load('@Url.Action("GetDiv", "Home")');

            });

            $("#secondPartialLink").click(function () {

                $("#partialViewDiv").load('@Url.Action("GetDiv2", "Home")');
            });
        })

    </script>

When I press one of the buttons the first time, it renders the partialview inside the DIV, but when I press it again, nothing happens, what would be the cause?

Solution

try to use this delegate to handle click event

            $(document).on("click","#firstPartialLink",function() {

                $("#partialViewDiv").load('/Home/GetDiv',function(html) { if need it});

            });

Comments

[Victor Franchi Zeclhynscki]

It worked! but why? what's the difference between this and the one I was doing?

[Timur Shahbanov]

Becouse this delegate working in one personal element of dom, whereas simple click handler working with all elements and the "on" delegate will supporting in new versions of jquery and other methods "bind" and "click" will unsupported.

[Victor Franchi Zeclhynscki]

oh, I see... Thank you!