We Keep Coding

Alert toggles every time when the input is changed

I have input and it toggles a function if it's been changed. I also have table that is created dynamically. And each row in table has an addButton. So, the problem is that this alert toggles so many times so I change the input, but I need to toggle it only once. How to deal with it?
$('.inputsearchform').bind('input', function() {
var addButton = $(".fa.fa-plus");
addButton.click(function() {
alert("test");
});
});
I don't need to add click event to this button, but I need to get onclick() event from it. But this code is only working way, that I found. By the way, I need to get this event only if button is clicked, not every time that I change input.
Question How to check onclick event on button, that appears dynmically, when the input changes?
I tried to add onclick event <i class="fa fa-plus" onclick="addButtonF()">
and in js file: function addButtonF(){
alert("test");
}
but I have an error addButtonF is not defined.

A start would be to define click outside of input handler to prevent multiple click handler calls at each click of addButton
So, the problem is that this alert toggles so many times so I change
the input, but I need to toggle it only once.
Not clear from Question which element needs to be toggled once, or which function should only be called once ?
addButton appears only if I write something in input. I need to use
alert only if I click on this button, not every time that I change
input.
Use event delegation to attach event to dynamically created elements having className .fa.fa-plus
$(".inputsearchform").bind("input", function() {
// create dynamic element
$("<table class='fa fa-plus'>")
.html("<tr><td>"
+ $(".fa.fa-plus").length
+ "</td></tr>"
).appendTo("body");
});
$(document).on("click", ".fa.fa-plus", function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" class="inputsearchform">
Substitute className for class which does not set className of element; use latest version of jQuery
$(".inputsearchform").bind("input", function() {
var div = document.getElementById("div");
var table = document.createElement("table");
div.appendChild(table);
var tr = document.createElement("tr");
table.appendChild(tr);
var td = tr.insertCell(0);
td.innerHTML = "test";
td.className = "try"
});
$(document).on("click", ".try", function() {
alert("test");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="text" class="inputsearchform">
<div id="div"></div>
jsfiddle https://jsfiddle.net/1x8ja6qe/2/

jquery clone with HTML drop down option two drop down select the same value an alert should select different value

Currently working on jquery clone where user click add it will clone the div perfectly but I have dropdown. If user select cellphone in drop down and in other dropdown if user select the same cellphone it should duplicate found and the dropdown value has to clear.
$('.slt_major select option:selected').each(function(i, e) {
alert("check");
//Check if values match AND if not default AND not match changed item to self
if ($(e).val() == cI.val() && $(e).val() != 0 && $(e).parent().index() != cI.index()) {
alert('Duplicate found!');
cI.val('0');
}
});
I was not able to see where the error was even the alert was not generating. Here is the fiddle link.
Thanks.

So here it is: DEMO
First I would like to correct your adding part since you were adding duplicate ids into internal elements of cloned row. So just change your code as below and check for inline comments.
$(document).on("click", ".btn_more", function () {
var $clone = $('.cloned-row:eq(0)').clone();
$clone.find('[id]').each(function(){
this.id=this.id +(count) //change the id of each element by adding count to it
});
$clone.find('.btn_more').after("<input type='button' class='btn_less1 phn_del' value='Del' id='buttonless"+count+"'/>")
$clone.attr('id', "added"+(count)); //just append count here
$clone.find('.preferred').attr('checked', false);
$clone.find('.sslt_Field').val(0);
$clone.find('.txt_CC').val('');
$clone.find('.txt_Pno').val('');
$(this).parents('.em_pho').after($clone);
count++; //increment count at the end.
});
Now to check for duplicate options you can do it as below. Also check inline comments:
//attach event handler to document since you need event delegation on dynamically created elements
//attach change event to class 'sslt_Field'
$(document).on('change','select.sslt_Field',function(event) {
var cI = $(this); //store a reference
var others=$('select.sslt_Field').not(cI);
//store reference to other select elements except the selected one
$.each(others,function(){
//iterate through remaining selects
if($(cI).val()==$(this).val() && $(cI).val()!="")//check if value has been
//already selected on other select
{
$(cI).val('');//empty the value
alert('already selected');//display alert.
}
});
});

one.('click') reset after click

I have this jQuery code. I make first lines here as comment, because they are not important in my question, just for structure. I have click event, after click on td I have input field with text in it. I set focus at end of text. But when I have made click, I want to remove focus , so that I can click in middle position of name, and cursor will be there. It works when it is one.('click'), but i need to do it multiple times, so one click works just for one time.
$('td').on('click', function() {
//val = $(this).text();
//console.log(val);
//rowid = $(this).parents('tr').attr('id');
//realclass = $(this).attr('class');
//$("tr").filter("#" + rowid).find("td").filter("." + realclass).find("span").hide(); //hide td->span field..
//$("tr").filter("#" + rowid).find("td").filter("." + realclass).find("input").show();//..and show input field
//get focus on end of input val
SearchInput = $("tr").filter("#" + rowid).find("td").filter("." + realclass).find("input");
strLength = SearchInput.val().length;
SearchInput.focus();
SearchInput[0].setSelectionRange(strLength, strLength);
});

The problem is that clicking on the input itself also triggers the click event on the encompassing <td> element (due to event propagation or "bubbling"), which you don't want to happen. To prevent that you want to call the event.stopPropagation() function when handling click events on the input:
$('td input').on('click', function(e) {
e.stopPropagation();
});

Showing div based on checkbox value with Javascript and style display attribute

I have created a web form with ASP.NET MVC.
I have successfully setup my View to add the checkbox which shows a div based on its value on click. This is the functioning Javascript:
$('div.schedule .input_control').click(function () {
var $target = $(this).closest('div').find('.showSchedule');
if (this.checked) {
$target.show();
} else {
if (confirm("Are you sure you want to exclude this schedule?") == true) {
$target.hide();
$(':hidden').not("input[name=__RequestVerificationToken]").val('');
} else {
$(this).prop("checked", true);
}
}
});
Here is the HTML snippet that has checkbox and div to be hidden and shown:
<div class="schedule">
#Html.CheckBox("schedule", false, new { #class = "input_control" })
<div style="display: none" class="showSchedule">
//form fields
</div>
</div>
The div is shown and hidden successfully when the checkbox is ticked and unticked by clicking on it. The confirm message works as expected too.
But when there is a validation error and form page loads again the div is hidden while the checkbox ticked!
How can I ensure that the div is shown always based on the value of checkbox? This is important as when the item is edited the form loads with the checkbox ticked but the div hidden.
I realize this would be because by default, my div style is set to "display: none".
So what is a better way for this?

Add a function to check the checkbox is checked or not on document ready, if it's checked then show the div, otherwise hide the div
$(document).ready(function () {
var $input = $('div.schedule .input_control:checked');
var $target = $input.closest('div').find('.showSchedule');
$target.show();
});

select only one checkbox and add class for the checked input

I have a list of checkbox and want to select the only one check box and add the class for the checkbox input and select another checkbox remove that class from the existing checkbox
$('input.myclass').click(function ()
{
var id = $(this).attr('id').replace('image-','');
$('input.myclass:checked').not(this).removeAttr('checked');
var sFilter = "";
$('input.myclass[type=checkbox]').each(function () {
sFilter = sFilter + (this.checked ? $(this).val() : "");
});
check();
});
function check(){
var a = $('input:checkbox[name=cover_image]:checked').val();
alert(a);
}
I want to select only one checkbox and class for the checked checkbox if that checkbox not checked then remove the class for that

If you really want to use checkboxes(and not radio buttons) for some reason, do something like this:
$('input:checkbox').on('click', function () {
$('input.selected').removeClass('selected').prop('checked', false);
$('input:checked').addClass('selected');
});
Edit: Removing the attribute works, but property manipulation is a slighty better way of doing it(as suggested by RobG)

For your purpose first remove classes from all checkbox and unchecked them and then add class to clicked checkbox and checked it as below
$("input[type='checkbox']").on('click', function () {
$("input[type='checkbox']").removeClass('selected').attr('checked', false);
$(this).addClass('selected').attr('checked', true);
});
Check this Fiddle for your question

you may use on() to listen the changes on group of checkboxes.
var $checkBoxes = $(":checkbox").on("change", function () { // Here listening the changes on checkbox using on()
$checkBoxes.removeClass("change").attr("checked", false); // remove the class from existing Checkbox
$(this).addClass("change").attr("checked", true); // adding the class for the currenly checked checkbox
});
working FIDDLE is here