Я сделал свою первую попытку плагина jQuery, но у меня есть эта проблема / ошибка, которую я не знаю, как обойти ее в плагине.
Вот ссылка, чтобы увидеть проблему - мой первый плагин .
Вот как вы можете исправить ошибку:
Нажмите на first 'DELETE'ссылку, затем вы увидите всплывающее окно, нажмите «ОК», затем вы увидите, что форма загружена, затем нажмите «Нет».
Вы можете повторить процесс № 1 столько разкак вы хотите.
Тогда вы увидите ошибку, когда вы нажмете на секунду «УДАЛИТЬ» - вы получите повторяющиеся всплывающие окна в зависимости от того, сколько раз вы повторилипроцесс № 1
Таким образом, несколько раз происходит, когда я нажимаю кнопку «Нет» в загруженной форме.
Но я не знаю, как избавитьсяиз этих множественных вхождений - это должно произойти только один раз (всплывающее окно должно произойти только один раз, когда вы нажимаете second 'DELETE').
Вот весь код HTML и JQuery,
$(document).ready(function(){
$('.delete-uploaded').pluginname({
deleteItem: '.item-uploaded',
deleteParent: '.items-uploaded',
wrapperParent: '.upload'
});
});
// You need an anonymous function to wrap around your function to avoid conflict
(function($){
// Attach this new method to jQuery
$.fn.extend({
// This is where you write your plugin's name
pluginname: function(options) {
//Set the default values, use comma to separate the settings, example:
var defaults = {
deleteItem: '.item-listed',
deleteParent: '.items-listed',
wrapperParent: '.upload',
}
var options = $.extend(defaults, options);
// return this.click(function(){ // original
// "this" is already a jQuery object:
// When you create the click function you can assign that element to a variable and reference it within:
var $cm = this.click(function(e){
var o = options;
var target_delete = $(this).parents(o.deleteItem); // The item for deletion, such as item held in li
var parent_delete = $(this).parents(o.deleteParent); // The parent that hold delete item, such as ul > li
var wrapper_parent = $(this).parents(o.wrapperParent); // The wrapper that hold the parent, such as div > ul > li
var target_loadin = $(this).parent();
var target_html = $(this).parent().html();
var path_load = $(this).attr('href');
var class_name = $(this).attr('class');
//alert(class_name);
alert($cm.selector);
// Load the delete form.
target_loadin.load( path_load, function(){
// When the yes button is triggered.
$("input[type=submit][name=yes]").click(function(){
// Get the path from attribute of action in the form.
var path_post = $(this).parent('form').attr('action');
//alert(path_post);
// Post the form.
$.post(path_post, $(this).serialize(), function(xml){
// Procees the form output.
//process_delete_uploaded(xml);
});
// Slide up the deleted target.
target_delete.slideUp('fast', function() {
// Remove its divs completely
target_delete.remove();
//alert($('li',parent_delete).length);
// Count how many items are left behind
if($('li',parent_delete).length == 0)
{
$('.binder-row',wrapper_parent).css({
borderBottom: '0px solid #999',
padding: '0px 0px 0px 0px'
});
}
});
return false;
});
// When the no/cancel button is triggered.
$("input[type=button][name=no]").click(function(){
// Return the html
target_loadin.html(target_html);
// Reload the delete function
$($cm.selector).pluginname({
deleteItem: o.deleteItem,
deleteParent: o.deleteParent,
wrapperParent: o.wrapperParent
});
return false;
});
});
return false;
});
}
});
//pass jQuery to the function,
//So that we will able to use any valid Javascript variable name
//to replace "$" SIGN. But, we'll stick to $ (I like dollar sign: ) )
})(jQuery);
Вот HTML,
<!-- upload c1-->
<div class="upload upload-image">
<!-- binder-background -->
<div class="binder-background target-toggler">
<!-- binder-row -->
<div class="binder-row">
<a href="#" class="btn-upload btn-upload-image" name="image" rel="#" >Upload</a>
<div class="status-upload status-upload-image"></div>
</div>
<!-- binder-row -->
<!-- binder-row -->
<div class="binder-row">
<!-- items-uploaded -->
<ul class="sort items-uploaded items-uploaded-image">
<!-- item-uploaded -->
<li id="item_29" class="item-uploaded">
<!-- item-uploaded-info -->
<div class="item-uploaded-info">
<span><a href="form_image_delete.php?img_id=29" class="delete-uploaded">DELETE</a></span>
<h4>9419_169881528011_783228011_3657915_407804_n_20110330221805.jpg</h4>
</div>
<!-- item-uploaded-info -->
</li>
<!-- item-uploaded -->
<!-- item-uploaded -->
<li id="item_30" class="item-uploaded">
<!-- item-uploaded-info -->
<div class="item-uploaded-info">
<span><a href="form_image_delete.php?img_id=30" class="delete-uploaded">DELETE</a></span>
<h4>69285_4159_1_06789134_webphotoscopy2_20110330221817.jpg</h4>
</div>
<!-- item-uploaded-info -->
</li>
<!-- item-uploaded -->
</ul>
<!-- items-uploaded -->
</div>
<!-- binder-row -->
</div>
<!-- binder-background -->
</div>
<!-- upload c1-->
Как я могу это исправить?
Спасибо.
РЕДАКТИРОВАТЬ:
// When the no/cancel button is triggered.
$("input[type=button][name=no]",target_loadin).click(function(){
// The string will become ojects after spliting it into pieces with .split(),
// so you must turn the object into string again with .toString().
var selector_current = $cm.selector.split(' ').slice(-1).toString();
// Return the html
target_loadin.html(target_html);
// Reload the delete function
target_loadin.find(selector_current).pluginname({
deleteItem: o.deleteItem,
deleteParent: o.deleteParent,
wrapperParent: o.wrapperParent
});
return false;
});