Link to home
Start Free TrialLog in
Avatar of Alex Lord
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 -

$(document).ready(function() {
    $("#contact-personal-fname").click(function () {
      alert("Hello!");

    });
  });

Open in new window


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>

Open in new window


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);

Open in new window


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>          ↵					"

Open in new window


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 -

User generated image
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	
		);

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Alex Lord
Alex Lord

ASKER

Hey chris

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.
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 :)