Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не работает ajax удаление, из-за повторного подключения файла. (https://javascript.ru/forum/misc/50375-ne-rabotaet-ajax-udalenie-iz-za-povtornogo-podklyucheniya-fajjla.html)

light 23.09.2014 21:11
Не работает ajax удаление, из-за повторного подключения файла.
 
Код сокращен, для более внятного описания проблемы.

Есть вот такой код:
$("#addNew").click(function(){	
			$.ajax({  
				type: "POST",  
				data: "newCat="+$('#CatAdd').val(),
				url: "http://"+window.location.hostname+"/include/ajax/del.php",  
				success: function(categ){  		
					$(".category").append("<li id='i1'>new</li>");
						$.ajax({ url: "http://"+window.location.hostname+"/js/del.js"	});	//удаление
						 
					} 
				}  					
			});			
		});


del.js содержит и написан, для того, что бы удалять, вновь созданные объекты через append: 

$('.deletes').click(function(){	  
			if (confirm('Вы уверены, что удалить?') { 
				$.ajax({  
					type: "POST",  
					data: "id="+$(this).attr("data-id")+"",
					url: "http://"+window.location.hostname+"/include/ajax/dels.php",  
					success: function(del){    
						$('#th'+del.id).html("").hide();
					}  					
				});	
				}	else {}			
		});


И если первый <li> он удаляет без проблем. То во второй раз, он спрашивает уже 2 раза, на 3 три и т.д.

Если добавить сразу 5 <li> то файл url: "http://"+window.location.hostname+"/include/ajax/del.php", прогрузится все 5 раз. И соответствено при нажатии на $('.deletes').click(function()
Он спросит меня все 5 раз, действительно ли я уверен.
Подскажите пожалуйста как можно с этим бороться?

bes 23.09.2014 21:48
Цитата:
Сообщение от light
Код сокращен, для более внятного описания проблемы.
то есть для того, чтобы сделать его совсем невменяемым
для внятного описания проблемы делают тестовые примеры,
додумывать за тебя html- и php-содержимое никто не собирается + приведённое описание кода ему противоречит
ждём тест, а вопрос - на х-я зачем такие навороты - пока оставим :)

light 23.09.2014 22:34
bes,
Извините, просто на форум я обращаюсь в крайнем случае, предварительно перебрав все возможные варианты, насколько хватает знаний, и под конец в голове полная каша, что и приводит к таким не совсем понятным темам. Мне казалось проблема ясна)
Специально для темы, сделал демо версию проблемы)
Код:
$(function() { 	
	$(".del").click(function(){
	if (confirm('Вы уверены, что хотите удалить?')) {
		$("#l"+$(this).attr("data-id")).hide();
		} else {}
	});
	
	$("#new").click(function(){ 
			$.ajax({  
				type: "POST",  
				data: "test="+$("#col").val(),
				url: "http://"+window.location.hostname+"/include/ajax/test.php",  
				success: function(test){	
					$("#col").val(test.id);
					$(".test").append("<li id='l"+test.id+"' data-id='"+test.id+"'>"+test.id+" <input type='submit' value='del' class='del' data-id="+test.id+" id='del"+test.id+"' /></li>"); 				
				}  					
			});		
	});
	
	
});

<input type="submit" value="new" id="new" />
<ul class="test">
	<li id="l1" data-id="1">1 <input type="submit" value="del" class="del" data-id="1" id="del1" /></li>
	<li id="l2" data-id="2">2 <input type="submit" value="del" class="del" data-id="2" id="del2" /></li>
</ul>
<input type="text" value="2" id="col" />

Файл ajax/test.php прибавляет 1 и возвращает id

<?  header("Content-type:application/json;"); $id = (int)$_POST['test']+1;?>
{ "id": "<?=$id;?>" }


Проблема в том, что при таком коде, новые <li> не удаляются.
Что бы они удалялись, нужно прописать вот так:

$(function() { 	
	$(".del").click(function(){
	if (confirm('Вы уверены, что хотите удалить?')) {
		$("#l"+$(this).attr("data-id")).hide();
		} else {}
	});
	
	$("#new").click(function(){ 
			$.ajax({  
				type: "POST",  
				data: "test="+$("#col").val(),
				url: "http://"+window.location.hostname+"/include/ajax/test.php",  
				success: function(test){	
					$("#col").val(test.id);
					$(".test").append("<li id='l"+test.id+"' data-id='"+test.id+"'>"+test.id+" <input type='submit' value='del' class='del' data-id="+test.id+" id='del"+test.id+"' /></li>"); 	
					
				$(".del").click(function(){
				if (confirm('Вы уверены, что хотите удалить?')) {
					$("#l"+$(this).attr("data-id")).hide();
					} else {}
				});
								
				}  					
			});		
	});
	
	
});


Но вот тут у меня и возникает та самая проблема. Я её вижу так: каждый раз когда я добавляю новый <li> этот код так же прописывается каждый раз.
А потом соответственно и вызывается 5 раз вместо одного.

bes 23.09.2014 23:42
потому что ты каждым кликом вешаешь дополнительный обработчик на каждую кнопку
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

<button class="but">click</button>
<button class="but2">click after</button>
<script>
$(function () {
	var n = 0;
	$(".but").click(function () {
		n++;
		$(".but2").click(function () {
			console.log(n);
		});
	});
});
</script>


а вот ответ на вопрос - зачем такие навороты

<input type="button" value="new" id="new" />
<ul class="test">
	<li id="l1" data-id="1">1 <input type="submit" value="del" class="del" data-id="1" id="del1" /></li>
	<li id="l2" data-id="2">2 <input type="submit" value="del" class="del" data-id="2" id="del2" /></li>
</ul>
<input type="text" value="2" id="col" />
<script>
$(function() { 	
	//$(".del").click(function(){
	*!*$(".test").on("click", ".del", function(){*/!*
	if (confirm('Вы уверены, что хотите удалить?')) {
		$("#l"+$(this).attr("data-id")).hide();
		} else {}
	});
	
	$("#new").click(function(){ 
			$.ajax({  
				type: "POST",  
				data: "test="+$("#col").val(),
				url: "test.php",  
				success: function(test){	
					$("#col").val(test.id);
					$(".test").append("<li id='l"+test.id+"' data-id='"+test.id+"'>"+test.id+" <input type='submit' value='del' class='del' data-id="+test.id+" id='del"+test.id+"' /></li>"); 	
					
				/*$(".del").click(function(){
				if (confirm('Вы уверены, что хотите удалить?')) {
					$("#l"+$(this).attr("data-id")).hide();
					} else {}
				});*/
								
				}  					
			});		
	});
	
	
});
</script>

light 24.09.2014 12:36
bes,
Такие навороты были нужны потому что по другому не умел) Спасибо большое!
А не подскажете еще один момент? Как сделать тоже самое, только с наведением мышки?

Есть вот такой код:
$('.titleCat, .editCat, .delCat').hover(function(){	  
		$('#e'+$(this).attr("data-id")+', #delc'+$(this).attr("data-id")).css("display","block");
	},function(){
		$('#e'+$(this).attr("data-id")+', #delc'+$(this).attr("data-id")).hide();
	});


<li id="li130" class="ui-state-default connectedSortable sortables ui-sortable" data-id="130">
	<div class="titleCat end" data-id="130"></div>
	<img id="e130" class="editCat" data-id="130" alt="" src="/images/editlink.png" style=""> 
	<img id="delc130" class="delCat" data-id="130" alt="" src="/images/delete.png" style="">
</li>

Вот так не срабатывает:
$(".sortables").on("hover", ".titleCat, .editCat, .delCat", function(){
	//$('.titleCat, .editCat, .delCat').hover(function(){	 
		$('#e'+$(this).attr("data-id")+', #delc'+$(this).attr("data-id")).css("display","block");
	},function(){
		$('#e'+$(this).attr("data-id")+', #delc'+$(this).attr("data-id")).hide();
	});

bes 24.09.2014 21:55
http://api.jquery.com/on/
Цитата:
Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.
Не путайте имя псевдо-события "hover" с методом .hover(), который принимает на вход одну или две функции.


нормальные примеры надо делать - нажал и посмотрел
я не понял чего ты там хотел добиться

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

<div class="div">
	<img id="img1" class="img" data-id="2" src="http://javascript.ru/forum/image.php?u=34470&dateline=1397213510" /><br/>
	<img id="img2" class="img" data-id="1" src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" />
	<div id="div1">light</div>
	<div id="div2">bes</div>
</div>

<script>
$(".div .img").hover(
	function(){
		$("#img" + $(this).attr('data-id') + ", #div" + $(this).attr("data-id")).hide();
	},
	function(){
		$("#img" + $(this).attr('data-id') + ", #div" + $(this).attr("data-id")).show();
	}
);
</script>



сегодня целый день что-то происходит?
http://api.jquery.com/
UPD:
--------------
Common, guyz!. All your base are belong to us.
Just please reinstall dat backdoored openssh deamon. And all will be fine.

root@jq01:~# who
scottgonzalez pts/1        2014-09-24 11:18 (pool-72-**-27-9.hrbgpa.****.verizon.net)
s5fs     pts/0        2014-09-24 11:16 (c-24-**-82-162.hsd1.or.*****.net)
ryanneufeld pts/3        2014-09-24 11:36 (s0106002618c70459.**.shawcable.net)
gnarf    pts/4        2014-09-24 11:43 (50.***.62.97)


--------------

I'm looking for a new job, I'm so sorry for this experiment with iframe, no one was injured, all files was permanently deleted.
Greetz: Umputun, Bobuk, Gray, Ksenks @ radio-t.com
My PGP public key is:
-----BEGIN PGP PUBLIC KEY BLOCK-----
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
=cECx
-----END PGP PUBLIC KEY BLOCK-----


Часовой пояс GMT +3, время: 20:21.