Javascript无法在PartialView上运行

Question

I am using MVC4, with C# and Razor to make a simple Web Application.

In my Controller I have a method that returns a partial view that is shown to the user, in this case, a modal popup:

public ActionResult GetPackageDetails(int id)
{ 
    return PartialView("_EditPackageModal", new ModalEditPackage());
} 

The partial view, which is a modal popup shows as predicted, but does not run any javascript:

@model SuperApp.Model.ModalEditPackage

<div class="modal fade bs-example-modal-lg" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Edit Package @Model.packageName</h4>
            </div>
            <div class="modal-body">

                <div>
                    <label class="control-label">Package Name: </label>
                    <input type="text" class="form-control" id="package-name" placeholder="@Model.packageName">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

This is the javascript code that I wish to run on the partial view:

<script>
    $("input").click(function () {
        alert("hello world!");
    });
</script>

After reading this question:

• Don't run javascript function in PartialView

I realized that I must include the script in the partial view. To sum up:

1. The partial view is unable to run the JS code that is in my project.
2. The partial view only runs JS code that is directly specified in the partial view using the <script> tag

Now, in this example such is fine, but in the real world I have several scripts that work on the partial view, and they are considerably big. Furthermore, the client already downloaded them because they are being used in other views and I don't know how to tell the partial view where the scripts are located since I am using Bundles.

Is there a way to fix this without smashing the script directly into the partial view?

Answer 1

give unique name to all your modals or html blocks. Make your js code like this:

$(document).on('click', '#yourSpecifiedDomElement input','click',function(){
    alert("hello world!");
});

place all your javascript code to specified js files which included in bundles.