MVC - jQuery не может получить доступ к добавленному частичному представлению, созданному Ajax и jQuery

У меня есть простое частичное представление, которое вызывается Ajax и добавляется к промежутку на странице cshtml с помощью jQuery. До сих пор все работает идеально.

Создать.cshtml

<span id="SpanCoverPhoto"></span>

myjQuery.js

$(document).ready(function () {

    $('select[id=BusinessList]').before(function () {
        loadCoverPhotos($('select[id=BusinessList]'));
    });

    $('select[id=BusinessList]').change(function () {
        loadCoverPhotos($('select[id=BusinessList]'));
    });

    function loadCoverPhotos(businessList) {

        var id = businessList.val();

        $.ajax({
            url: "/CoverPhotos/Load",
            type: "POST",
            data: { 'BId': id },
            success: function (data) {
                $('span[id=SpanCoverPhoto]').html(data);
            },
            error: function () {
                alert("Cover photos not loaded");
            }
        });
    }

});

Частичный вид:

@model IEnumerable<banaam.Models.CoverPhoto>

<div>
   @foreach (var item in Model)
    {
      <div class="Coverphoto">
         <img src="~/Images/BusinessBackground/[email protected]" class="img-thumbnail" style="max-width:120px; max-height:100px;" />
      </div>
    }
</div>

Прямо сейчас я хотел бы щелкнуть фотографию и снова обработать ее с помощью jQuery. Но данные добавления в диапазон не отображаются в «просмотре исходного кода страницы», и я мог видеть их только при использовании F12.

Не могли бы вы сообщить мне, как я могу щелкнуть фотографии и получить ответ от jQuery?

С уважением и большое спасибо за ваше время,

Амин


jquery model-view-controller partial-views
person Amin Farvardin    schedule 31.08.2015    source источник
comment
Контент, загруженный с помощью AJAX, не будет отображаться в исходном коде страницы. Почему вы не используете селектор идентификаторов, например $('#SpanCoverPhoto')?   -  person Satpal    schedule 31.08.2015

Ответы (2)


arrow_upward
1
arrow_downward

Вам нужно установить прослушиватель на document с помощью jQuery, чтобы прослушивать это событие на всей странице. Даже когда добавляются новые элементы.

Вы можете сделать это следующим образом:

$(document).on('click', '.your-class', function(event) {
    console.log('Image clicked!');
});

Замените .your-class на .img-thumbnail, например.
И взгляните на документ: http://api.jquery.com/on/.

person Lancelot HARDEL    schedule 31.08.2015
comment
Большое спасибо. очень сэкономил мое время. - person Amin Farvardin; 31.08.2015

arrow_upward
0
arrow_downward

Вы можете использовать jQuery On для привязки событий к элементам, загружаемым после начальной загрузки страницы.

$(document).on('.Coverphoto').click(function(){ //your implementation here });

Примечание. Вы не можете видеть содержимое документа, загруженного с помощью просмотра исходного кода страницы. Они видны только с помощью F12 (Инструменты разработчика).

person U.P    schedule 31.08.2015