How do I bind appended html with jQuery?
I'm loading HTML content and appending this to a DIV. The problem then of course, is that the HTML is not bound.
Since I'm not clicking anything, I can't use jQuery.live
or jQuery.bind
(I think).
Here is my code.
// Load directory content and display list
function loadDirContent(current_path,new_dir)
{
// Load new content in browser window
jQuery.ajax({
type: "POST",
url: "../wp-content/plugins/wp-filebrowser/fileBrowser.php",
dataType: 'html',
data: {current_path: current_path, new_dir: new_dir},
su开发者_如何转开发ccess: function(html){
jQuery("#fileBrowser").html(html); // Append new content
}
});
}
How can I bind this new HTML so that I may run jQuery on the added content?
I face the problem when I use the Ajax Upload Plugin. It fetches data from the form, but any $_POST data is left blank. This occurs only after "page reload" using my loadDirContent function.
UPDATE
I have the following input in my form:
relative_url; ?>" />
Each time I go one directory down in my file browser, current_path
is updated.
Ajax File Upload Plugin calls the uploader.php
function. Inside uploader.php I have the following command: $this->current_path = $_POST['current_path'];
The problem is that $_POST['current_path']
is empty.
$().live and $().delegate will both work on events other than click. What event are you binding handlers to?
Additionally, if live/delegate really won't work, you can always bind handlers within the success callback.
Example:
// function for doing event binding:
function bindHandlers(root) {
// do any event binding here, only selecting elements within the provided root
$('.something', root).click(...);
$('.something-else', root).hover(..., ...);
};
// bind all children of the document on dom ready
$(function() { bindHandlers(document); });
// Load directory content and display list
function loadDirContent(current_path,new_dir)
{
// Load new content in browser window
jQuery.ajax({
type: "POST",
url: "../wp-content/plugins/wp-filebrowser/fileBrowser.php",
dataType: 'html',
data: {current_path: current_path, new_dir: new_dir},
success: function(html){
// append the new stuff and attach handlers
bindHandlers($('#fileBrowser').html(html));
}
});
}
You may want to check the solutions I received in my recent, similar question. Both are good answers (I marked the one that helped me). From the looks of what you're doing, you'll probably want to re-assign handlers for the content after you add it.
精彩评论