Alex Lord
asked on
OnClick or any JQ event working possible due to how html is appended.
JQ onclick not triggering or any event on any inputs within this container.
So i have a container with inputs now im trying to test a click event on these inputs but it isnt working and no errors and i used click hundreds of times and never had this issue,
so really simple -
which refers to this one -
now this isnt hard coded in, it actually been passed from ajax and appended like so .
how it looks in its array . -
to me this doesn't look clean in the array and im thinking this must be source of problem even tho it displays correctly in the html -
the input start there journey as stored harded coded template wihtin a php array which is than passed back by a ajax response like so -
So i have a container with inputs now im trying to test a click event on these inputs but it isnt working and no errors and i used click hundreds of times and never had this issue,
so really simple -
$(document).ready(function() {
$("#contact-personal-fname").click(function () {
alert("Hello!");
});
});
which refers to this one -
<div id = 'firstname' class=' col-md-4'>
<label class=' control-label' for='textinput'>First Name</label>
<input id='contact-personal-fname' name = 'FIRST_NAME' type='text' placeholder='First name' class='form-control input-md no-border' value='".$v_item['FIRST_NAME']."' >
</div>
now this isnt hard coded in, it actually been passed from ajax and appended like so .
var arrayJson = JSON.stringify(response);
var properties = JSON.parse(arrayJson);
$("#default-personal-properties").append(properties.personal);
how it looks in its array . -
personal
:
Array(16)
0
:
"↵ <div id = 'firstname' class=' col-md-4'>↵ <label class=' control-label' for='textinput'>First Name</label> ↵ <input id='contact-personal-fname' name = 'FIRST_NAME' type='text' placeholder='First name' class='form-control input-md no-border' value='Tim' > ↵ </div>↵ "
1
:
"↵↵ "
2
:
"↵ <div id = 'surname' class=' col-md-4'>↵ <label class='control-label' for='textinput'>Last Name</label> ↵ <input id='contact-personal-lname' name = 'SURNAME' type='text' placeholder='Last name' class='form-control input-md no-border' value='McKane'> ↵ </div>↵↵↵ "
3
:
"↵ ↵ ↵ <div id = 'mobile' class='col-md-4'>↵ <label class='control-label' for='textinput'>Mobile</label> ↵ <input id='contact-personal-mobile' name = 'PHONE' type='text' placeholder='Mobile' class='form-control input-md no-border' value='+447711593595'> ↵ </div>↵↵↵ "
4
:
"↵ <div id = 'landline' class='col-md-4'>↵ <label class=' control-label' for='textinput'>Laneline</label> ↵ <input id='contact-personal-landline' name = 'LANDLINE' type='text' placeholder='Laneline' class='form-control input-md no-border' value=''> ↵ </div>↵ ↵↵ "
5
:
"↵ <div id = 'position' class=' col-md-4'>↵ <label class=' control-label' for='textinput'>Position</label> ↵ <input id='contact-personal-position' name 'POSITION' type='text' placeholder='Position' class='form-control input-md no-border' value='' > ↵ </div>↵ ↵↵ "
6
:
"↵ <div id = 'email' class=' col-md-4'>↵ <label class=' control-label' for='textinput'>Email</label> ↵ <input id='contact-personal-email' name = 'EMAIL' type='text' placeholder='Email' class='form-control input-md no-border' value='tim@navajotalk.com'> ↵ </div>↵ ↵↵ "
7
:
"↵ <div id = 'age' class=' col-md-4'>↵ <label class=' control-label' for='textinput'>Age</label> ↵ <input id='contact-personal-age' name='AGE' class='form-control input-md no-border' type='text' placeholder='Age' value=''/> ↵ </div>↵↵ "
8
:
"↵↵ <div id = 'gender' class=' col-md-4'> ↵ <label class='control-label' for='editContactGender'>Gender:</label>↵ <select id='contact-personal-gender' name='GENDER' class='form-control input-md no-border' >↵ <option value=''>- select -</option>↵ <option value='Male' 'selected='selected'' >Male</option>↵ <option value='Male' '' >Female</option>↵ </select> ↵ </div>↵↵ "
9
:
"↵↵ <div id = 'age-range' class=' col-md-4'> ↵ <label class='control-label' for='editContactAgeRange'>Age Range:</label>↵ <select id='contact-personal-age-range' name='AGE_RANGE_ID' class='form-control input-md no-border' >↵ <option value=''>- select -</option>↵ <option value='1' '' >11-16</option>↵ <option value='2' '' >17-25</option>↵ <option value='3' '' >26-35</option>↵ <option value='4' '' >36-45</option>↵ <option value='5' '' >46-55</option>↵ <option value='6' '' >56-65</option>↵ <option value='7' '' >66-75</option>↵ <option value='8' '' >76-85</option>↵ <option value='9' '' >86-95</option>↵ </select>↵ </div>↵↵ "
10
:
"↵↵ <div id = 'sms-consent' class=' col-md-4'>↵ <label class='control-label' for='editSmsConsent'>SMS Consent:</label>↵ <select id='contact-personal-sms-consent'> name='SMS_CONSENT' class='form-control input-md no-border' ↵ <option value='1' '' >Yes</option>↵ <option value='0' '' >No</option>↵ <option value='NULL' 'selected='selected'' >None</option>↵ </select>↵ </div>↵↵ "
11
:
"↵↵ <div id = 'call-consent' class=' col-md-4'> ↵ <label class='control-label' for='editCallConsent'>Call Consent:</label>↵ <select id='contact-personal-call-consent' name='CALL_CONSENT' class='form-control input-md no-border' >↵ <option value='1' '' >Yes</option>↵ <option value='0' '' >No</option>↵ <option value='NULL' 'selected='selected'' >None</option>↵ </select>↵ </div>↵↵ "
12
:
"↵↵ <div id = 'email-consent' class=' col-md-4'>↵ <label class='control-label' for='editEmailConsent'>Email Consent:</label>↵ <select id='contact-personal-email-consent' name='EMAIL_CONSENT' class='form-control input-md no-border' >↵ <option value='1' '' >Yes</option>↵ <option value='0' '' >No</option>↵ <option value='NULL' 'selected='selected'' >None</option>↵ </select>↵ </div>↵↵ "
13
:
"↵↵ <div id = 'cookies' class=' col-md-4'>↵ <label class='control-label' for='editCookie'>Cookies:</label>↵ <select id='contact-personal-cookies' name='COOKIE_CONSENT' class='form-control input-md no-border' >↵ <option value='1' '' >Yes</option>↵ <option value='0' '' >No</option>↵ <option value='NULL' 'selected='selected'' >None</option>↵ </select>↵ </div>↵↵ "
14
:
"↵↵ <div id = 'gdpr' class=' col-md-4'>↵ <label class= control-label' for='editLegalBasis'>GDPR Legal Basis:</label>↵ <select id='contact-personal-gdpr' name='GDPR_BASIS' class='form-control input-md no-border' >↵ <option value='NULL'>- select -</option>↵ <option value='1' '' >Consent</option>↵ <option value='2' '' >Contract</option>↵ <option value='3' '' >Legitimate Interests</option>↵ </select>↵ </div>↵↵ "
15
:
"↵ <div id = 'mail-consent' class='col-md-4'>↵ <label class='control-label' class='control-label' for='editMailConsent'>Mail Consent:</label>↵ <select id='contact-personal-mail-consent' name='MAIL_CONSENT' class='form-control input-md no-border' >↵ <option value='1' '' >Yes</option>↵ <option value='0' '' >No</option>↵ <option value='NULL' 'selected='selected'' >None</option>↵ </select>↵ </div> ↵ "
to me this doesn't look clean in the array and im thinking this must be source of problem even tho it displays correctly in the html -
the input start there journey as stored harded coded template wihtin a php array which is than passed back by a ajax response like so -
$response = array(
'personal' => $properties
);
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
No worries Alex.
No need to feel bad - we're all learning all the time, and having EE around makes it a little less painful :)
No need to feel bad - we're all learning all the time, and having EE around makes it a little less painful :)
ASKER
i feel bad as i do post lot questions but i am learning and i do thank you for your time, that worked great. thanks for the info.