0

Im trying to make an asp.net mvc View with 2 PartialViews who get their informations by an ajax call with javascript. 

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="form-group">
                <label class="col-md-2 control-label"></label>
                <div class="col-md-2">
                    <input id="CategoryName" class="form-control" />
                    <span class="text-danger"></span>
                </div>
            </div>
            <div class="addbutton">
                <input id="AddCatButton" type="button" class="btn btn-default custombtn" value="asd" />
            </div>
        </div>
        <div class="row">
            <div id="MasterContainer">
                @Html.PartialFor("_Categories", Model.Categories, "Categories")
            </div>
        </div>

    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label class="col-md-2 control-label"></label>
            <div class="col-md-2">
                <input id="CategoryItemName" class="form-control" />
                <span class="text-danger"></span>
            </div>
            <div class="addbutton">
                <input id="AddItemButton" type="button" class="btn btn-default custombtn" value="asd" />
            </div>
        </div>
        <div id="DetailContainer">
            @*Contentn of the Detailpage*@
        </div>
    </div>
</div>

everythings is working fine i can name and add a new Category the Partialview will "refresh" and then the scripts stop working.

ive included them in the _Layout.cshtml

The script calls the Controller and give back an PartialView("_Categories",model) with every category in the database and also a second method gives back every item of a category but the script stopped working until i reload the whole page.

ive tried it to include the scripts on each partialview but then when i created a new category it creates 2,4,8,16,and so on Do I habe to include the script somewhere elöse or what is the solution.

The Javascript is one script with 3 Methods in it 

$("#CatList li").on('click', function () {
//    Shows all items in a category and refresh the itemlist partialview 
});
$("#AddItemButton li").on('click', function () {
//    Adding an item to the selected Category
//    and refreshes the itemlist partialview
});
$("#AddCatButton li").on('click', function () {
//    add a Category and refresh the category partialview 
});
smurfo
  • 81
  • 9
  • 1
    Where are those `#CatList` and `#AddItemButton` and other elements? They're not in the code shown in the question. If they're being dynamically re-loaded in the DOM then that would explain why these click handlers stop working. – David May 19 '17 at 15:30
  • `#AddItemButton` and `#AddCatButton` are `div` in the View and `#CatList` is a `div` in the `PartialView` where the `li` items will be genrated with a `foreach` – smurfo May 19 '17 at 15:42
  • Yes they are dynamically reloaded by AJAX. Ive read the other Thread but cant figure out a solution that works – smurfo May 19 '17 at 16:41
  • Did you do what that answer suggests? – David May 19 '17 at 16:43
  • I also have an old blog post related to the linked duplicate which may help explain the problem and understand the solution: http://publicvoidlife.blogspot.com/2014/03/on-on-or-event-delegation-explained.html – David May 19 '17 at 16:46
  • Now its working, i forgot the selector.... thanks for your help – smurfo May 19 '17 at 16:50

0 Answers0