2013-06-04 2 views
0

JQuery (Mobile)를 사용하여 여러 탐색 명령을 사용하여 코드 작성을위한 시작 지점으로 태그 조각을 얻을 수 있습니까?JQuery Mobile - 선택기를 사용하여 특정 요소로 이동

.html 중에서

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <script type="text/javascript" src="source.js"></script> 
</head> 
<body> 
<div data-role="page" id="home"> 
    <div data-role="header"> 
    </div> 
    <div data-role="content"> 
     <form name="form_header" id="form_header" data-id="form_header" onsubmit="alert('Call function to do search..to be implemented')" action="post"> 
      <label for="form_header" form="form_header" class="select">Choose fields:</label> 
      <select name="select_menu" id="select_menu" size="6" form="form_header" multiple="multiple" data-native-menu="false" data-placeholder="true" placeholder="student_id"> 
       <option>Search By:</option> 
       <option for="form_header" data-num="1" value="student_id" selected="selected">Student ID</option> 
       <option for="form_header" data-num="2" value="parking_permit">Parking Permit</option> 
       <option for="form_header" data-num="3" value="license_plate">License Plate</option> 
       <option for="form_header" data-num="4" value="first_name">First Name</option> 
       <option for="form_header" data-num="5" value="last_name">Last Name</option> 
       <option for="form_header" data-num="6" value="lot_name">Lot Name</option> 
       <!-- WANT TO INSERT HERE -->      
       <input for="form_header" type="submit" value="Submit"></input> 
      </select> 

의 .js

$("form[data-id='form_header']").append("<textarea name='ya'>Text<textarea/>"); 

내가뿐만 아니라 Here를 검토 한

(예상대로 작동하지 않는 이상)그러나 이것이 어떻게 행해지는지 이해할 수 없거나 심지어 가능합니다.

질문 :! 내가 <로 표시된 지역으로 이동할 수 있습니다 방법 - 원하는는 여기에 삽입하는 -> 내 첫 번째 코드 블록에

+0

'append()'호출이'pageinit','pagebeforeshow' 또는'pageshow' 핸들러에 있습니까? –

+0

아니요, onclick 호출에 있습니다. 이 코드는 페이지가로드 될 때 실행하기위한 것이 아니며 클릭 할 때만 – Zac

+1

HTML이 틀리거나 SELECT 상자 안에 입력 한 내용을 더 추가하려고합니다. – Gajotres

답변

2

내 추측은 당신이 종료하지 않는 그 것이다 당신의 텍스트 영역 요소를 올바르게 나는 당신이 이것을 알고있을 것이라고 확신하지만 그것을 직접 복사하고 붙여 넣으면 종료 할 때 슬래시가 텍스트 영역 앞에 가야합니다.

http://jsfiddle.net/eXpES/1/

업데이트

$("form[data-id='form_header']").append("<textarea name='ya'>Text</textarea>"); 

이 나는 ​​HTML에서 또 다른 문제를 발견했습니다. 선택 드롭 다운의 일부가 아니기 때문에 마지막 요소와 제출 전에해야합니다.

append() 대신에 before() 및 after() 문을 사용하면 요소 내부가 아닌 반환 된 요소 바로 앞이나 뒤에 삽입 할 수 있습니다.

jQuery 모바일의 스타일은 실제 타겟을 둘러싼 추가 DOM 요소를 추가하는 것처럼 보입니다. 내가 가지고 올 수

가장 좋은 방법은 (선택 요소 외부로 이동 한 후)하여 제출 입력에 id = "foo는"을 추가하고, 다음 코드는 다음과 같습니다

$("#foo").parent().before("<textarea name='ya'>Text</textarea>"); 

가있을 수 있습니다 다시 구조화 할 때 DOM을 더 잘 탐색 할 수있는 더 나은 jQuery 방법이지만, 언뜻 보면 아무것도 보지 못했습니다.

+0

정확히 '시작 지점'을 의미하는 것이 확실하지 않은 경우 [데이터 ID = 'select_menu'] – 10gistic

+0

슬래시가 태그 뒤의 텍스트 영역을 나타 내기 때문에 왜 그런지는 알지 못합니다. 그러나 그런 식으로 작동합니다. – Zac

+0

jsfiddle 예제로 답변을 편집했습니다. 기대 한 결과가 아닌가? – 10gistic

관련 문제