Develop Reference

C# MVC call javascript function on click

How to we call a function from an external JS file on click?
JS file on /Content/js/pj_no.js
function alertMe(){
alert("me");
}
C#
#Scripts.Render("~/Content/js/pj_no.js")
<input value="親コード新規登録" type="button" onclick="alertMe()" />
Assuming this is in the same file iin my csHTML it is working fine. But when I put it on the external JS it is not calling anymore.
I know my JS is in the right directory as if i trigger an $(document).ready(function () {} it is calling the alert. But I need it to be on click event.
Help please
$(document).ready(function (
alert("me"); -- This is working,
function alertMe(){ //cant call this function
alert("me");
}
)});

$(document).ready(function (
alert("me"); -- This is working,
// NOTE: Following becomes local function. and will not work
function alertMe(){ //cant call this function
alert("me");
}
)});
You need to make it global to get called. Please declare it out side of document ready function.
$(document).ready(function (
alert("me"); -- This is working,
)});
// NOTE: Following will work
function alertMe(){
alert("me");
}

you can bundle it first in App_Start > BundleConfig.cs inside RegisterBundles
bundles.Add(new ScriptBundle("~/bundles/pj_no").Include(
"~/Content/js/pj_no.js"));
then you can call it in your view :
#Scripts.Render("~/bundles/pj_no")
<input value="親コード新規登録" type="button" onclick="alertMe()" />

You just need to simply put the external js function in script folder.
Then simply call include it on view
#Scripts.Render("~/Scripts/pj_no.js")
Then simply call the function on onclick
<input value="親コード新規登録" type="button" onclick="alertMe()" />

Try the following code, it will work
window.alertMe = function(){ //can call this function
alert("me");
}
Your code is not working because your function gets added to the local scope of $.ready function. By using window.alertMe your function will be added to global scope even if it is inside the $.ready method

It is working now with this way.
In MVC we rarely uses onclick event on input element, usually we use jQuery like this:
$("#elementname").click(function () {
alertMe();
});
<input value="親コード新規登録" type="button" id="elementname" />.
– Tetsuya Yamamoto

onclick event is not working when function is in external javascript file

Before coming here I tried few links listed in stackoverflow, but none of them helped me to get this issue fixed Or may be I am doing something wrong.
I have a input button in my aspx and have serverclick event as well as onclick, both client and server methods are called correctly, I only facing problem when the 'onclick' function is in external file(it is in same directory).
I even referenced the js file in aspx.
NOTE :
all other controls are working in external js except this.
inline function works fine, but not when moved in external function.
I even tried window.onload() but it triggers the function during pageload which is not what I need.
aspx
<script type="text/javascript" src="external.js"></script>
Input button.
<input class="data" type="submit" name="cmdSubmit" value="Run Report" onclick="return FormValidate();"
onserverclick="RunReport" runat="server" id="Submit1" />
external.js
$(document).ready(function () {
function FormValidate() {
alert("Validated");
});

Please remove $(document).ready(function () { present around your function FormValidate() to make it global function. Right now by placing it inside ready handler you are making it a local scoped function. So your external.js should be:
function FormValidate() {
alert("Validated");
}

You need to define it as global function if written in external file
function FormValidate() {
alert("Validated");
};
Removing .ready(function...) around it will make it global which will be called in html file.

You are limiting scope of function keep it out of .ready(function...)
this will allow you function to be available globally

jquery does not remove element

I've a page that uses jquery mobile and I've got the following simple problem:
A webpage with a (single) link somewhere in the DOM:
<a data-theme="a" data-role="button" href="https://m.mybet.com">
Smartphone-Version nutzen</a>
And I added a button like this to the html
<input type="button" onclick="javascript:remove_link();"/>
My javascript looks like this:
<script type="text/javascript">
function remove_link() {
console.log("1")
$("a").remove();
console.log("2")
}
</script>
However, when clicking the button the chrome browser tells me:
Uncaught TypeError: Cannot call method 'remove' of null
remove_link
onclick
I also tried empty() instead, same problem. Why?

I allways use ids with javascript, is easier for me. Try this:
<a data-theme="a" id="id1" data-role="button" href="https://m.mybet.com">
Smartphone-Version nutzen</a>
<script type="text/javascript">
function remove_link() {
console.log("1")
$("#id1").remove();
console.log("2")
}
</script>

Okay, I found out. I use native javacript now:
document.querySelector( 'a' ).remove()
does the job.

Try this:
<a data-theme="a" data-role="button" href="https://m.mybet.com">
Smartphone-Version nutzen</a>
<input id="remove_link" type="button" />
<script type="text/javascript">
$('#remove_link').click(function() {
console.log("1")
$("a").remove();
console.log("2")
});
</script>

Looks like you have not loaded jQuery. Make sure you include the <script src="path/to/jquery.js"></script> before calling your function.
Without loading jQuery, your browser is calling the native $ function.
// native jQuery function
function $(id) {
return document.getElementById(id); // may return null
}
The native function may return null instead of an empty jQuery object. It is also searching for an id, rather than a css selector. In your case, an element with id 'a' rather than all anchor elements.

jQuery .on click event does not occur

Hi and thanks for reading. I've been trying to avoid using HTML onclick="__" references and instead putting these events in my .js file. After reading about jQuery's .click() and then .on() events, I tried to use this in my code for a button.
edit In my haste to make up a <p> that didn't have the rest of the contents, I entered "name" instead of "id". Many answers have recommended I either switch to a p[name=p+ or #p+ reference, but my main problem has been that I can't even hit the alert before the reference to the id/name. Thanks again for your answers.
HTML:
<p name="pBananas"> junk </p>
<button class="deleter" id="dBananas" name="Bananas">Delete</button>
JS:
$(document).ready(function() {
$('.deleter').click(function() {
alert('click function works');
$("p" + $(this).attr("name")).remove();
});
});
The above code won't even get to the alert when I click the button. I've also tried referring to the button by name and ID, and going by $(document).ready($('.deleter')___.
I tried using the $(handler) format as well to have the click event be set after the document is ready. Neither way seems to work. At this point, I resorted to onclick="deleteButton()" and have a deleteButton() function in my .js file, but the function won't detect $(this) and just deletes all <p> tags.
The rest of my javascript is working. I haven't tried including this .on() at the bottom of the HTML, but I'm trying to avoid scripts in my HTML as well. For completeness' sake, I've been testing on both Chrome and Firefox, using a .jsp file to render the HTML.
Thanks again.
Edits
here's how I'm referencing my jquery and js, directly copy-pasted.
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/index.js"></script>
</head>
here is how my html looks leading up to the div where the is inserted:
<body>
<div id="wrapper">
<div id="header">Card Draw Probability Calculator</div>
<div id="main">
<div id="cardList">
<fieldset>
<legend> Select cards for probability calculation</legend>
<div id="innerCardList"></div>
Here is how the <p> is generated:
function newestCardListLineMaker() {
var $newLine = $('<p id="newestPara"><input type="checkbox" name="new" value="none"/> <input class="cardText" type="text" maxlength="30" name="newestCard" /> Quantity <input type="text" maxlength="1" class="quantityText" name="newestQuant" /><button class="deleter" id="newestDelete">Delete</button><br/></p>');
$("#innerCardList").append($newLine);
On another note, which I should have seen before as significant: the HTML that the .click or .on(click, handler) is referencing has been created by another js function.

Try using .on() function, so your code would be:
$(document).ready({
$('.deleter').on('click', function(){
//do stuff here
});
});
Even better would be this:
$(document).ready({
$('div_above_.deleter').on('click', '.deleter', function(){
// do stuff here
});
});
Hope this helps you.

I have modify your javascript code check it.
$('.deleter').click(function() {
alert('click function works');
var p="p"+$(this).attr("name");
$('p[name='+p+']').remove();
});

working demo
<p id="pBananas"> junk </p>
<button class="deleter" id="dBananas" name="Bananas">Delete</button>​
$(document).ready(function() {
$('.deleter').click(function() {
alert('click function works');
$("#p" + $(this).attr("name")).hide();
});
});​
Edited Jsfiddle

For me it works. Didn't delete the Paragraph element though so your code should look like this instead:
<p id="pBananas"> junk </p>
<button class="deleter" id="dBananas" name="Bananas">Delete</button>
and
$(document).ready(function() {
$('.deleter').click(function() {
alert('click function works');
$("#p" + $(this).attr("name")).remove();
});
});

$(document).ready(function() {
$('.deleter').click(function() {
alert('click function works');
//alert($(this).attr("name"));
$("p[name=p" + $(this).attr("name") + "]").remove();
});
});​

The final code I used to complete the .on('click') event was:
$(document).ready(function() {
$("div#innerCardList").on("click", "button.deleter", function() {
var paraName = $(this).closest("p").attr("id");
$("#" + paraName).remove();
});
});
The HTML elements which I wanted to assign click events to were generated after the page was already loaded. I needed to delegate the events to the containing div.
Thanks for all the help and different perspectives!

unable to call click event in JS file

Below is the html code:
<input type="button" id="abc" name="TechSupport_PartsOrder" value="Open Editor" />
Below is the JQuery Code:
$('#abc').click(function () {
alert('x');
});
Now when i put the above JQuery code to JS file it does not work, while when i put the same in page it works fine. Why this is happening i don't knw.
And if i call the function onclick of button like this:
<input type="button" id="abc" name="TechSupport_PartsOrder" onclick="abc()" value="Open Editor" />
JQuery:
function abc()
{
alert('x');
}
it works well..

Wrap the code in a ready handler:
$(function() {
$('#abc').click(function() {
alert('clicked');
});
});

Did you make sure that the event handler is getting defined after the DOM has loaded? This is why jquery recommends putting all your code in
$(document).ready(function(){
//XXX code goes here
});
you're event handler is probably try to be assigned before the element has been loaded into the DOM.

Does the following solve the problem?
$(function(){
$('#abc').click(function () {
alert('x');
});
})
Your code may be getting called before '#abc' has been added to the DOM