I have this page:
<div >
<div id="leftSideBar">
<ul id="menuList">
<li >
<div ><img src="assets/img/dashboard.png" /></div><span>Dashboard</span>
</li>
<li >
<div ><img src="assets/img/products.png" /></div><span>Products</span>
</li>
<li >
<div ><img src="assets/img/sales.png" /></div><span>Sales</span>
</li>
</ul>
</div>
<div id="mainContent">
<div >
<h2>Dashboard</h2>
<div >
<div >
<div >
<h3>Most revenue generated</h3>
<div >
<div id="loading">
<img id="loading-image" src="assets/img/loader.gif" alt="Loading..." />
</div>
</div>
</div>
<div >
<h3>Most units sold</h3>
<div >
<div id="loading">
<img id="loading-image" src="assets/img/loader.gif" alt="Loading..." />
</div>
</div>
</div>
</div>
</div>
</div>
<div >
<h2>Products</h2>
<div >
<form method="GET" action="">
<input type="text" id="searchTerms" placeholder="Search by title, sku, tsin id" />
<input id="searchProducts" type="submit" name="searchProducts" value="Search" />
</form>
<div >
</div>
</div>
<div >
<div ></div>
<div >
<div id="loading">
<img id="loading-image" src="assets/img/loader.gif" alt="Loading..." />
</div>
</div>
<div ></div>
</div>
</div>
<div >
<h2>Sales</h2>
<div >
<form action="" method="POST">
<label for="date1">Start Date</label>
<input id="startDate" type="date" name="date1" value="Start Date" placeholder="Start Date" value="" min="1997-01-01" max="2030-12-31" />
<label for="date2">End Date</label>
<input id="endDate" type="date" name="date2" value="End Date" placeholder="End Date" value="" min="01-01-2010" max="01-01-2030" />
<input id="filterSales" type="submit" name="getfiltered" value="Filter Results" />
<input id="clearSales" type="submit" name="clearsales" value="Reset Results" />
</form>
</div>
<div >
<div >
<div id="loading">
<img id="loading-image" src="assets/img/loader.gif" alt="Loading..." />
</div>
</div>
</div>
</div>
</div>
</div>
I generate a list of items based on the amount of pages there are for a result set. I want to use the list items as pagination links. So I load the items like so:
$result = getsales("https://api.someapi.com/v2/sales?page_size=" . $pagesize . "&page_number=" . $pageNum);
$sales_amount = $result['summary']['total'];
$items = $result['sales'];
$num_pages = (ceil($sales_amount / 100) * 100) / $pagesize;
$counter = 1;
echo "<div class='stats'><div class='totalpages'>There were " . $sales_amount . " sales in total. There are " . $num_pages . " pages.</div><div class='pagination'>
<ul id='pagesList'>";
for ($i = 1; $i < $num_pages 1; $i ) {
if ($i == $pageNum) {
echo "<li class='$i active'>" . $i . "</li>";
} else {
echo "<li class='$i'>" . $i . "</li>";
}
}
and they are loaded on the page like so:
<div >
<div >There were 607 sales in total. There are 7 pages.</div>
<div >
<ul id="pagesList">
<li >1</li>
<li >2</li>
<li >3</li>
<li >4</li>
<li >5</li>
<li >6</li>
<li >7</li>
</ul>
</div>
</div>
</div>
My jQuery script to make the page go to the next page I put an alert on since it wasn't going to the next page. The click event is not triggered and the alert never displays:
jQuery("#menuList li").click(function () {
$(".resultsPage").removeClass("active");
$(".menuImage, #menuList span").removeClass("active");
$(this).addClass("active");
$(this).children(".menuImage, span").addClass("active");
var which = $(this).attr("class").split(" ")[0];
if (which == "goDash") {
$(".dashBoard").addClass("active");
$.ajax({
method: "GET",
url: "overview-left.php",
success: function (data) {
$(".leftContent").html(data);
},
error: function (request, status, error) {
$(".saleContentData").html(error);
},
});
$.ajax({
method: "GET",
url: "overview-right.php",
success: function (data) {
$(".rightContent").html(data);
},
error: function (request, status, error) {
$(".saleContentData").html(error);
},
});
} else if (which == "goProd") {
$(".productList").addClass("active");
$.ajax({
method: "GET",
url: "getproducts.php",
success: function (data) {
$(".prodContentData").html(data);
},
error: function (request, status, error) {
$(".saleContentData").html(error);
},
});
} else if (which == "goSale") {
$(".salesList").addClass("active");
$.ajax({
method: "GET",
url: "getsales.php",
success: function (data) {
$(".saleContentData").html(data);
},
error: function (request, status, error) {
$(".saleContentData").html(error);
},
});
$("#pagesList li").click(function (e) {
console.log(e);
alert();
});
}
});
Why is the event not happening? There are no errors.
CodePudding user response：
It wont work, because while you are loading the page, the li elements are not available.
Edit 1
After comments from @Refunic, if the script is loaded on the head or based on updated answer, the code is executed. Check by writing the this block of code outside the menusList click function
jQuery("#menuList li").click(function () {
// All your codes here
})
$("#pagesList li").click(function (e) {
console.log(e);
alert();
});
CodePudding user response：
The snippet itself seems correct, which suggests, that the 'placement' might be the problem.
The browser evaluates script as it finds it, going from top to bottom, so if the snippet is above your list, it will fail to add the listener to anything, because the ID has not been declared yet.
Potential solutions include:
- Put the script below your list
- Wrap it into an 'ready' handler (preferred)
The ready handler looks like this:
$(function() {
//yourScript
});
and will only be executed after the document has finished loading.
After edit by OP:
There is now a different problem.
The originally shown code is within the click handler of #menuList, which means that the handler will only be registered after you clicked any of the #menuList lines.
The upper handler will not function, because there is no container with the id menuList and the second handler will not function, because it is never executed.
Move the second handler outside of the upper handler and wrap it into the ready handler (described above) to make sure it will only be evaluated after the page finished loading.