Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.09.2014, 21:11
Аватар для light
Аспирант
Отправить личное сообщение для light Посмотреть профиль Найти все сообщения от light
 
Регистрация: 11.04.2014
Сообщений: 60

Не работает 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 раз, действительно ли я уверен.
Подскажите пожалуйста как можно с этим бороться?
Ответить с цитированием
  #2 (permalink)  
Старый 23.09.2014, 21:48
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

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

Последний раз редактировалось bes, 23.09.2014 в 21:51.
Ответить с цитированием
  #3 (permalink)  
Старый 23.09.2014, 22:34
Аватар для light
Аспирант
Отправить личное сообщение для light Посмотреть профиль Найти все сообщения от light
 
Регистрация: 11.04.2014
Сообщений: 60

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 раз вместо одного.
Ответить с цитированием
  #4 (permalink)  
Старый 23.09.2014, 23:42
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

потому что ты каждым кликом вешаешь дополнительный обработчик на каждую кнопку
<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>
Ответить с цитированием
  #5 (permalink)  
Старый 24.09.2014, 12:36
Аватар для light
Аспирант
Отправить личное сообщение для light Посмотреть профиль Найти все сообщения от light
 
Регистрация: 11.04.2014
Сообщений: 60

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();
	});
Ответить с цитированием
  #6 (permalink)  
Старый 24.09.2014, 21:55
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

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-----
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
ajax не работает, но не выдаёт ошибок. xTODx jQuery 12 22.04.2014 20:40
Ajax не работает в IE dimitar AJAX и COMET 4 18.04.2014 16:14
IE 6, jquery, не работает ajax Прохожый jQuery 3 01.06.2010 17:20
Safari + ajax некорректно работает, а в других работает demi AJAX и COMET 35 15.07.2009 14:11
Prototype + Ajax - не работает в IE, FF. silvek Prototype & script.aculo.us 0 30.08.2008 16:06