вызвать jquery из ajax загруженного частичного представления в mvc3

Question

Я загружаю частичное представление в главное представление, используя ajax, но изо всех сил пытаюсь заставить JQuery запускаться в частичном представлении.

В основном я пытаюсь разрешить частичное представление для загрузки, которое содержит кнопку, котораяпозволяет мне открыть диалоговое окно.

Мой частичный вид содержит этот небольшой фрагмент js

    <script type="text/javascript">
    $(document).ready(function () {
        alert('ready');
        $('#edit-note').click(function () {
            //$('#dialog').dialog('open');
            alert("alert displayed from jquery");
        });
    }); 

</script>

Однако он никогда не запускается.

Что мне нужно сделать, чтобы позволить jquery работать из динамически загруженного частичного представления?

Answer 1

Ваш код, начинающийся с $('#edit-note').click(function () {, запускается, когда документ готов. На тот момент вы еще не загрузили частичное представление, поэтому $('#edit-note') - это пустая коллекция.

jQuery позволяет привязывать события к элементам, которых еще нет на странице, с помощью метода live:

$('#edit-note').live('click', function () {
    alert("alert displayed from jquery");
});

Answer 2

Другая вещь, которую вы можете сделать, это использовать @ Ajax.ActionLink и в AjaxOptions использовать событие OnSuccess для вызова функции JavaScript, которая выполняет JQuery, который вы пытаетесь выполнить. то есть.

@Ajax.ActionLink("Create New", "Create", "Employee", new AjaxOptions()
{
UpdateTargetId = "divAction",
InsertionMode = InsertionMode.Replace,
HttpMethod = "GET",
OnSuccess = "createNew_Success"
}, new { id = "btnAdd", @class = "newButton", OnClick = "$('#divAction').slideDown();" })

Тогда в вашем Javascript:

<script type="text/javascript">
function createNew_Success() {
$('.button').button();
}
</script>

Это загружает PartialView в div и после успешной загрузки применяет JQuery-стиль к объектам с классом кнопки