Develop Reference

button click handler not working

I am trying to attach the ExportPDF to the button exportSelectedPdf on a cshtml file but when I click the button the handler is not working. Any ideas why ?
<input id="exportSelectedPdf" type="button" value="Export to PDF" />
<script type="text/javascript" language="javascript">
function ExportPDF() {
alert("Hi");
var url=#Url.Action("ExportTransactionsAsPdf", "JournalController");
exportSelectedTransactions(url);
}
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF());
</script>

use the below code:
<input id="exportSelectedPdf" type="button" value="Export to PDF" />
<script type="text/javascript" language="javascript">
function ExportPDF() {
alert("Hi");
var url=#Url.Action("ExportTransactionsAsPdf", "JournalController")
;
exportSelectedTransactions(url);
}
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF);
</script>

You should attach a function reference as "click" listener, not the result of it.
Change:
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF());
to the (not immediately call the function, just pass the reference to it):
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF);

You are confusing client side with server side. Try this.
var url = '#Url.Action("ExportTransactionsAsPdf", "JournalController")';
and bind event like this
document.getElementById("exportSelectedPdf").addEventListener("click", ExportPDF);

Thanks for your replay. Still can not get the attached button to work. I defined the onclick handler inline and that worked for me.
<input id="exportSelectedPdf" type="button" value="Export Selected Transactions to PDF"
onclick="var url='#Url.Action("ExportTransactionsAsPdf", "Journal", new {area="Journal"})';exportSelectedTransactions(url);"/>

Can't get access to the clicked element

I have input search and table, that generates automatically if I change input.
<div class="search">
<form action="" method="post" class="searchform" >
<input type="search" name="" placeholder="Search" class="inputsearchform" ng-model="search"/>
<input type="submit" name="" value="" class="submitsearchform" />
</form>
</div>
<div class="songlist">
<table id="songlistTableR" ng-app='test_table' ng-controller='main_control'>
<tr><th>Name</th><th>Link</th></tr>
<tr ng-repeat="data in loaded | filter:search">
<td><i class="fa fa-plus"></i>{{data.song_name}}</td>
<td><a href="{{data.link}}" target='_blank'>Youtube</a></td>
</tr>
</table>
</div>
JS script for generating data in table is:
var app = angular.module('test_table', []);
var n = [];
app.controller('main_control',function($scope,$http, $rootScope){
load();
function load(){
$http.get("http://localhost:7001/load").success(function(data){
$rootScope.loaded=data;
n = data;
});
}
});
I also have code, that shows table when input.value != 0
$('.inputsearchform').bind('input', function() {
if($(this).val() == 0){
songlistTableR.style.visibility = 'hidden';
}
else{
songlistTableR.style.visibility = 'visible';
}
});
Everything works good, but I can't get access to element .fa.fa-plus when it's clicked. The only two ways, that work are putting $(".fa.fa-plus").click(function(){}); in bind event or creating function outside window.onload that will work if I put in HTML file onclick for .fa.fa-plus element.
First method is bad, because if I change input more than one time, click function will work every time, even if I didn't click on this element.
Second method also isn't appropriate because I need to know index of clicked element.
Can anybody advise me a solution?
UPD Sorry for interruption, I solved this problem. I changed the version of Jquery to 2.2.2 and now it's working. Thanks for helping!

You may want to try to attach the event handler to the document but filtering on your selector. In this way even if the inner DOM changes, your handler will always intercept the event triggered by elements having the class fa fa-plus
$(document).on("click",".fa.fa-plus", function(){});
As #mhodges pointed out, this is a delegated event.

try to change this:
<td><i class="fa fa-plus"></i>{{data.song_name}}</td>
with:
<td><a ng-click="doSomething($event)" ><i class="fa fa-plus"></i>{{data.song_name}}</a></td>
then in the controller:
$scoope.doSomething() = function(event){
do what you need
}
just handle events in the angular way

Change onclick handler of the element added dynamically after the page has loaded

I have the following DOM structure.
<div class="purchase-section">
<div class="purchase">
<input type="submit" id="add-to-cart" class="btn" name="add" value="Add to Cart"> <span class="rc-or">Or</span>
<button class="btn rc-button" id="btn-buy-now" onclick="event.preventDefault(); window.location='https://example.com?productId=681';">Buy Now - 3 installment</button>
</div>
</div>
The button element is added by a script which runs after the page has loaded. I need to change the onclick handler for this button. I tried following but it doesn't work.
$(document).ready(function() {
$('.purchase-section').on('change', '.purchase', function(){
$("#btn-buy-now")[0].onclick = null;
$("#btn-buy-now").click(function() { alert("done") });
});
});
Can anyone please help me with this?

Use $("#btn-buy-now").removeAttr("onclick"); to remove onclick completely and then delegate event to dynamically added element.
$("static_parent").on("event", "dynamic_element", function () {
});
$(".purchase").on("click", "#btn-buy-now", function () {
/* code */
});

Try this:
$(document).ready(function() {
$(".purchase-section").find("#btn-buy-now").removeAttr('onclick');
$(".purchase-section").find("#btn-buy-now").click(function(e) {
e.preventDefault();
alert("done");
});
});
However, it depends on when this element is loaded. You will need to ensure your button is already in the DOM before this script executes, otherwise this may not be effective.

simple append issue with jquery

I have a simple question. My JS code is like this, but when I try to add a new element or content to the <div>, it comes up then goes up quickly. I don't know why.
How can I avoid this?
<head>
$(document).ready(function () {
$('#mybtn').click(function () {
$('#main').append('<button id ="mm" onclick="myfun()">generate code my fun.</button>');
});
});
</head>
<body>
<form id="form1" runat="server">
<button id ="mybtn">generate code</button>
<div id="main"></div>
</form>
</body>

You should stop the button from Submitting the form by setting the button's type to be that of button.
Example :
<button type="button" id="mybtn">generate code</button>
The default type for a <button> element is submit. Which is causing your <FORM> tag to submit.

Try this:
$('#mybtn').click(function (e) {
e.preventDefault();
$('#main').append('<button id ="mm" onclick="myfun()">
generate code my fun </button>');
return false;
});

Try with:
$('#mybtn').click(function (event) {
event.preventDefault();
$('#main').append('<button id ="mm" onclick="myfun()"> generate code my fun </button>');
});
preventDefault : If this method is called, the default action of the event will not be triggered.

Input button onClick remove closest div

Erm, why this don`t work, iv used similar code like this for my site many times..butnow dont work..
HTML
<div><span>a</span><input type='hidden' /> <input type='button' onClick='Remove(event)' />
JQuery
function Remove(e){
e.preventDefault();
$(this).closest('div').remove();
}
Looks like $(this) is not my button. I tested with alert($(this).val()) and nothing heppend.

How about adding a class to the button element and bind a handler to the button
<div>
<span>a</span>
<input type='hidden' />
<input type='button' class'removeDiv' />
Code:
$(function () {
$('.removeDiv').click (function () {
$(this).parent().remove();
// As I see the input is direct child of the div
});
});
My divs are created from clientside and serverside too. Its much easy to add onclick function instead to unbind-rebind all on new item, no?
In such cases you can use delegated events. See below,
$(function () {
//Replace document with any closest container that is available on load.
$(document).on('click', '.removeDiv', function () {
$(this).parent().remove();
// As I see the input is direct child of the div
});
});

This should work!
HTML
<div><span>a</span><input type='hidden' /> <input type='button' onClick='Remove(this)' />
JQuery
function Remove(obj){
$(obj).closest('div').remove();
}