нагрузки в DIV с JQuery - Div содержит внешний

Question

У меня есть страница (index.php), который содержит DIV динамически загружать содержимое:

<div id='#container'></div> 

В этом DIV я динамически нагружать внешнюю страницу, используя следующий :

$(this).on('click', '.subNav', function() { 
    var subSectionId = this.id; 
    $("#content").load('pages/content.php?id=' + subSectionId); 
}); 

у меня проблема заключается в следующем: на странице content.php есть кнопка (класс .tblSort), что при нажатии на потребности перезагрузить content.php внутри DIV «#content». У меня есть следующий код JQuery:

$(this).on('click', '.tblSort', function() { 
    var subSectionPageId = $("#subSectionId").val(); 
    var orderBy = this.id; 
    $("#content").load('/pos2/pages/content.php?id=' + subSectionId + '&orderBy=' + orderBy); 
}); 

Это не работает, и я предполагаю, что это связано с тем, что ДИВ «#content» находится в файле index.php и кнопки (класс .tblSort) находится в файле content.php. Каким образом это происходит?

Answer 1

Здесь вместо этого вы можете использовать тело или элемент DIV родительский, который не меняется на время выполнения.

$('body').on('click', '.tblSort', function() { 
    var subSectionPageId = $("#subSectionId").val(); 
    $("#content").load('/pos2/pages/content.php?id=' + subSectionId); 
}); 

Answer 2

Попробуйте обернуть событие нажатия кнопки в событии ajax complete.

I imagien вы определяете событие щелчка в документе готов и что происходит в том, что JQuery не может найти элемент указательный его на начальном этапе.

попробовать что-то вроде этого ..

//When all dom elements are ready on a page (images wont be loaded at this point) 
$(document).ready(function(){ 

    //On click of the container, load the content from external source 
    //Probably not clicking the container so change selector 
    $("#container").on('click', function(){ 
     $("#content").load('pages/content.php?id=' + this.id); 
    }); 

}); 

//.load() is an ajax call just wrapped up friendly, so attach an ajax complete event. 
$(document).ajaxComplete(function(){ 

    //On the tblSort button click (dynamically loaded in #content above) 
    $("#content .tblSort").on('click', function(){ 
     $("#content").load('/pos2/pages/content.php?id=' + $("#subSectionId").val()); 
    }); 

}); 

Дайте что попробовать. Не проверено так не уверен, что это сработает для вас, но я не понимаю, почему нет.

UPDATE

Обновление ответа из-за замечания OP в. Уведомление #container изменилось на #button @OP: обновить этот селектор, чтобы соответствовать вашим потребностям и извлечь идентификатор, как описано.

//When all dom elements are ready on a page (images wont be loaded at this point) 
$(document).ready(function(){ 

    //On click of the container, load the content from external source 
    //Probably not clicking the container so change selector 
    $("#button").on('click', function(){ 
     $("#content").load('pages/content.php?id=' + $(this).attr('id')); 
    }); 

}); 

//.load() is an ajax call just wrapped up friendly, so attach an ajax complete event. 
$(document).ajaxComplete(function(){ 

    //On the tblSort button click (dynamically loaded in #content above) 
    $("#content .tblSort").on('click', function(){ 
     $("#content").load('/pos2/pages/content.php?id=' + $("#subSectionId").val()); 
    }); 

}); 

Answer 3

Попробуйте это будет работать,

$(document).ajaxComplete(function(){ 
     //On the tblSort button click (dynamically loaded in #content above) 
     $("#content").on('click','.tblSort', function(){ 
      $("#content").load('/pos2/pages/content.php?id=' + $(this).parent().val()); 
     }); 

    }); 

ИЛИ

$(document).ajaxComplete(function(){ 
    //On the tblSort button click (dynamically loaded in #content above) 
    $("#content").on('click','.tblSort', function(){ 
     $("#content").load('/pos2/pages/content.php?id=' + $(this).parent().find("#subSectionId").val()); 
    }); 

}); 

Если вы не можете запустить затем разделить ваш точный код и объяснить