jQuery -> onClick nie dziła

0

cześć,
Mam następujący problem, nie chce mi działać onClick wywołany z poziomu jQuery:

Plik główny:

<body>

<script>

$('#c_right').click(function() {
    alert("test");
})

</script>

Plik php wczytany za pomoca XMLHttpResuest:

<div class="login">
<label>Username: </label> <input type="text" id="username" maxlength="50" name="username" value="">
<Label>Password: </label> <input type="password" id="password" maxlength="50" value="">
<button type='button' class='butt_log' onclick='login()'>Login</button>

</div>

<div class="center_right" id="c_right">
</div>

Ma ktoś jakieś pomysły jak można zrobić żeby działało?

1

Z tego co wiem to musisz jeszcze dopisać taki kodzik

$(document).ready(function() {
//tu wsadzasz swój kod
} )
1

albo nawet krócej

$(function() {
   //tu wsadzasz swój kod
})
0

niestety nie pomogło, ale wcześniej jak patrzyłem w inny sposób to działało:

<body>
<div class="head_logo">
Logo
</div>

<div id="page">

<div class="login">
<label>Username: </label> <input type="text" id="username" maxlength="50" name="username" value="">
<Label>Password: </label> <input type="password" id="password" maxlength="50" value="">
<button type='button' class='butt_log' onclick='login()'>Login</button>

<div class="center_right" id="c_right">
</div>

</div>


<script>

$('#c_right').click(function() {
		alert("test");
	})

</script>

</body>

tylko ze mi potrzebne to jak będzie w oddzielnych plikach, ale wtedy nie działa właśnie.

0

w którym miejscu wstawiasz oddzielny plik? Może za wcześnie go wstawiasz. Tj. jest różnica między tym kodem:

<div class="center_right" id="c_right"></div>
<script src="foo.js"></script>

a tym:

<script src="foo.js"></script>
<div class="center_right" id="c_right"></div>

bo w drugim przypadku skrypt się ładuje zanim istnieje #c_right

EDIT:

Plik php wczytany za pomoca XMLHttpResuest:

teraz widzę dopiero co kombinujesz. Czyli pobierasz z serwera kod HTML i go wstrzykujesz na stronę? No to click nie zadziała (ponieważ w momencie, w którym wywołujesz click, nie ma jeszcze tego elementu), ale spróbuj .on http://api.jquery.com/on/

0

Jakoś też nie chce to działać, ogólnie caly kod wygląda tak:

<link rel="stylesheet" href="css/general.css">
<script src="include/jquery-1.12.2.js"></script>
<script src="include/js_first.js"></script>

</head>

<body>
<div class="head_logo">
Logo
</div>

<div id="page">
</div>

</body>

</html>

w pliku js_first.js:

window.onload = function(){
	var xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange = function(){
			if(this.readyState == 4 && this.status == 200)
				{
				document.getElementById("page").innerHTML = this.responseText;
				}
			}
		xmlhttp.open("GET","include/page.php?check=1",true);
		xmlhttp.send();
}

$(function(){
	
	$('#c_right').click(function() {
		alert("test");
	})

})

	$('#c_right').on( "click", function() {
		alert("test");
	});

page.php:

<?php

if(isset($_COOKIE["log"]))
	{
	echo"test2";	
	}
else
	{
	include('../frm/page.tpl');
	}
	
?>

page.tpl:


<div class="login">
<label>Username: </label> <input type="text" id="username" maxlength="50" name="username" value="">
<Label>Password: </label> <input type="password" id="password" maxlength="50" value="">
<button type='button' class='butt_log' onclick='login()'>Login</button>

</div>

<div class="center_right" id="c_right">
</div>

onclick próbuje ustawic w pliku js_first.js i nie chce działać ale jeśli używam czego innego z js jako test to działa normalnie więc nie jestem pewien w czym problem że to nie chce działać:

przykład z pliku js, wywołany z tego samego pliku:

function login(){
	document.getElementById('c_right').innerHTML = "test";
	$('#c_right').hide();
	}
0

taka poboczna uwaga:

 var xmlhttp = new XMLHttpRequest();

Jeśli już używasz jQuery, to trochę bez sensu jest używanie XMLHttpRequest, skoro w jQuery masz już .get, .post czy .ajax, które robią to samo, tylko łatwiej.
Poza tym w przeglądarkach jest natywnie coś takiego jak fetch https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

  document.getElementById("page").innerHTML = this.responseText;

Podobnie to. To po co ci jQuery, skoro w jednym miejscu go używasz, a w drugim piszesz ręcznie to, co w jQuery miałbyś łatwiej?

Niech zgadnę - pewnie przekopiowałeś kod z kilku różnych miejsc i nic z tego co napisałeś, nie jest twoje do końca. I w jednym skrypcie, który przekopiowałeś używali XMLHttpRequest, w drugim jQuery... Bo to chyba najbardziej prawdopodobne wyjaśnienie.

Jeśli chcesz w ten sposób "get shit done", bo np. nie jesteś programistą, a masz np. blog o zbieraniu znaczków i chcesz po prostu dopisać do niego jakąś funkcję, to jeszcze ujdzie.

Ale jeśli chcesz się nauczyć programować albo ogólnie już programujesz, i chcesz zrobić coś większego, to trochę naokoło idziesz. I takie pozorne skróty kosztują cię czas (choćby fakt, że ci nie działa i musisz szukać odpowiedzi na forum). Lepiej poświęcić naukę na naukę podstaw, zamiast bawić się w zgadywankę, dlaczego coś nie działa.

Tak samo stosujesz nie wiadomo dlaczego 3 różne rodzaje podpinania eventów (za pomocą jQuery, za pomocą atrybutu onclick='login() i np. window.onload = , takie coś można robić jak się wie, co się robi i jak poszczególne rzeczy działają. Jeśli nie wiesz, to lepiej zostań przy element.addEventListener (albo po prostu użyj jQuery, który pod spodem ci to sam podpina).

 $('#c_right').on( "click", function() {

Ten fragment z dokumentacji:

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). (...). Alternatively, use delegated events to attach event handlers.

http://api.jquery.com/on/

czyli bardziej (patrząc w przykłady z dokumentacji i próbując je zastosować) np.

$("#c").on("click", "#c_right", function() {});

niż

$("#c #c_right").on("click", function() {});

które nie działa (swoją drogą dokumentacja trochę mgliście to tłumaczy i można faktycznie pomyśleć, że drugi sposób zadziała).
http://jsfiddle.net/z9bpqemo/

poza tym google: javascript event delegation, przydałoby się ogarniać, w jaki sposób w ogóle to działa pod spodem.

No i użycie id (zamiast np. klasy) też mi się wydaje słabym pomysłem, podobnie jak ciągnięcie AJAXem tego przez internet, z drugiej strony nie wiem, co jest w elemencie #c_right, jaką to rolę ma spełniać?

0

Więc ogólnie mam doświadczenie w JavaScript i PHP, ale jQuery i AJAX zaczynam dopiero ponieważ chciałem zrobić dynamiczna całą stronę co do metody XMLHttpRequest było to w kursie który przerabiałem.

$('#c_right').click(function() {
        alert("test");
    })

Ten kod powyżej wziął się z tego że nie chciałem za każdym razem w znacznikach wpisywać onClick() żeby oprogramować działanie.

#c_right -> w tym będzie się wyświetlać zawartość w poźniejszym etapie strony jak np kliknie się link "wiadomości".

1 użytkowników online, w tym zalogowanych: 0, gości: 1