【问题标题】:How to identify form elements in an IFRAME如何识别 IFRAME 中的表单元素
【发布时间】:2012-03-08 01:51:54
【问题描述】:

我正在尝试确定<input type="text"> 中的value<textarea> 中的值是否发生变化,以便我可以启动对服务器的AJAX 调用。该脚本只是循环并显示每个id,而不仅仅是当前IFRAME 中的那些。

我知道如何进行 AJAX 调用和后端脚本,我只是不知道如何捕获表单元素的value 在任何给定的prettyPhoto IFRAME 中是否发生变化。我的 prettyPhoto 相框是动态创建的,FORM 中有 800 多个元素。

我有以下 jQuery:

jQuery.support.cors = true; // Needed for AJAX to work in certain older browsers and versions

$(document).ready(function(){

    // load each PP Frame
    $('a[rel^="prettyPhoto"]').prettyPhoto({
        social_tools: false,
        changepicturecallback: function() {
            var abc = $('input.inputText').val();
            alert(abc);
        }
    });

}); // end .ready()

非常感谢任何想法或帮助。

<form id="my-form" name="my-form"><div class="rowhighlight" style="clear:both">

<div style="clear:both">
    <p style="float:left;width:40px;text-align:right;background-color:inherit;margin:0;padding:0;margin-left:60px;padding-right:10px;"><a href="#n0076-1" rel="prettyPhoto[n0076]" title="App Title<br />2012">76</a></p>
    <div style="display:none;">
        <a href="#n0076-2" rel="prettyPhoto[n0076]" title="App Title<br />2012"></a>
        <a href="#n0076-3" rel="prettyPhoto[n0076]" title="App Title<br />2012"></a>
        <a href="#n0076-4" rel="prettyPhoto[n0076]" title="App Title<br />2012"></a>
    </div>
    <p style="float:left;width:240px;background-color:inherit;margin:0;padding:0;color:inherit;">Person 76</p>
    <p style="float:left;width:240px;background-color:inherit;margin:0;padding:0;color:inherit;">Person 76-A<span style="font-size:0.8125em;padding-left:8px;">(Type)</span></p>
    <p style="float:left;width:180px;background-color:inherit;margin:0;padding:0;color:inherit;">3/1/12 at 10:22am (Thu)</p>
    <p style="float:left;width:60px;text-align:right;background-color:inherit;margin:0;padding:0;color:inherit;">0</p>
    <p style="float:left;width:60px;text-align:right;background-color:inherit;margin:0;padding:0;color:inherit;padding-right:10px;">0.00</p>
</div>

<div id="n0076-1" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>
<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">

    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 76</span></p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 76-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 1, 2012 at 10:22am</p>
</div>

<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 1-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0076_1" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0076_1" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 1-->
<div style="clear:both;"></div></div> <!-- end 0076-1 -->
<div id="n0076-2" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>
<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 76</span></p>

    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 76-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 1, 2012 at 10:22am</p>
</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 2-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0076_2" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0076_2" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 2-->

<div style="clear:both;"></div></div> <!-- end 0076-2 -->
<div id="n0076-3" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>
<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 76</span></p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 76-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>

    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 1, 2012 at 10:22am</p>
</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 3-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0076_3" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0076_3" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 3-->
<div style="clear:both;"></div></div> <!-- end 0076-3 -->
<div id="n0076-4" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>

<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 76</span></p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 76-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 1, 2012 at 10:22am</p>

</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px"><span class="ltOrange">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</span></div><div style="clear:both;border-bottom:1px solid #ccc;padding-top:20px;"></div></div> <!-- end 0076-4 -->
<div class="rowhighlight" style="clear:both">

    <p style="float:left;width:40px;text-align:right;background-color:inherit;margin:0;padding:0;margin-left:60px;padding-right:10px;"><a href="#n0108-1" rel="prettyPhoto[n0108]" title="App Title<br />2012">108</a></p>
    <div style="display:none;">
        <a href="#n0108-2" rel="prettyPhoto[n0108]" title="App Title<br />2012"></a>
        <a href="#n0108-3" rel="prettyPhoto[n0108]" title="App Title<br />2012"></a>
        <a href="#n0108-4" rel="prettyPhoto[n0108]" title="App Title<br />2012"></a>
    </div>
    <p style="float:left;width:240px;background-color:inherit;margin:0;padding:0;color:inherit;">Person 108</p>
    <p style="float:left;width:240px;background-color:inherit;margin:0;padding:0;color:inherit;">Person 108-A<span style="font-size:0.8125em;padding-left:8px;">(Type)</span></p>
    <p style="float:left;width:180px;background-color:inherit;margin:0;padding:0;color:inherit;">3/2/12 at 11:12pm (Fri)</p>
    <p style="float:left;width:60px;text-align:right;background-color:inherit;margin:0;padding:0;color:inherit;">0</p>
    <p style="float:left;width:60px;text-align:right;background-color:inherit;margin:0;padding:0;color:inherit;padding-right:10px;">0.00</p>
</div>

<div id="n0108-1" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>
<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 108</span></p>

    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 108-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 2, 2012 at 11:12pm</p>
</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 1-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0108_1" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0108_1" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 1-->

<div style="clear:both;"></div></div> <!-- end 0108-1 -->
<div id="n0108-2" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>
<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 108</span></p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 108-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>

    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 2, 2012 at 11:12pm</p>
</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 2-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0108_2" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0108_2" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 2-->
<div style="clear:both;"></div></div> <!-- end 0108-2 -->
<div id="n0108-3" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>

<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 108</span></p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 108-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 2, 2012 at 11:12pm</p>

</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 3-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0108_3" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0108_3" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 3-->
<div style="clear:both;"></div></div> <!-- end 0108-3 -->
<div id="n0108-4" style="display:none;width:600px;">
<h1 style="float:left;margin:6px 0 8px 6px;padding:0;border:none;">Header 1</h1>
<h2 style="float:right;margin:9px 8px; 8px 0;padding:0;border:none;">Header 2</h2>
<div style="clear:both;margin:0 6px;padding:4px 10px;background-color:#dedede">
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888">Name 1:</span> <span style="font-weight:bold">Person 108</span></p>

    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:11px">Name 2:</span>Person 108-A (Type)&nbsp;&nbsp;&bull;&nbsp;&nbsp;Description</p>
    <p style="color:#333;text-align:left;padding:0;margin:0;font-size:0.6875em;line-height:1.25em;"><span style="color:#888;padding-right:9px">Date:</span> March 2, 2012 at 11:12pm</p>
</div>
<div style="color:#333;text-align:left;padding-left:4px;margin:0;padding-right:10px;font-size:0.875em;line-height:1.375em;margin-top:10px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a magna et massa ultrices porta ut a sem. Nulla eu mauris eget nunc sagittis ornare. Mauris convallis posuere nisi, non posuere turpis mattis ut. Quisque venenatis, dolor ac placerat posuere, velit purus adipiscing libero, eu suscipit nibh justo non nunc. Praesent non odio in nunc tempus volutpat sed ac metus. Nam eleifend adipiscing ipsum, ultricies adipiscing purus accumsan eu. Nulla tincidunt tincidunt varius. Sed non aliquet nunc. Mauris in pulvinar eros. Ut elementum pulvinar interdum. Fusce pulvinar posuere sollicitudin. Nam ultricies auctor sapien, quis eleifend ipsum pharetra hendrerit.</div><!--start form 4-->
<div style="margin-top:36px;display:block"><input class="textInput" id="es_user_2012_0108_4" type="text" value="0" style="float:left;margin:0 2px 0 2px;padding:0;width:60px;height:60px;border:1px solid #999;color:#777;text-align:center;font-size:3.5em;" /><textarea class="noteInput" onFocus="$(this).val('')" id="en_user_2012_0108_4" style="float:left;margin:0 2px 0 2px;padding:2px;width:424px;height:56px;border:1px solid #999;color:#369;text-align:left;font-size:0.75em;">In box to left, enter 1-5 (1=low &amp; 5=high). Use this box for optional notes.</textarea></div>
<!--end form 4-->

<div style="clear:both;"></div></div> <!-- end 0108-4 -->

</div></form>

附:我知道如何使用样式表,并且在我完成开发后会将所有样式移到一个表中。我在开发过程中有一个内联样式的诀窍(可能是坏习惯),因为事情变化太频繁,我更喜欢一次处理 1 个文档。

下一次尝试使用 [at]JF 的答案

<script>

jQuery.support.cors = true; // needed for ajax to work in certain older browsers and versions

$(document).ready(function(){

/*
    // load scores and notes in each PP Frame
    $('a[rel^="prettyPhoto"]').prettyPhoto({
        social_tools: false,
        changepicturecallback: function() {
            var abc = $('input.inputText').val();
            //alert(abc);
        }
    });
*/

    var $pps = $("a[rel^=prettyPhoto]"),
        $inputs = $('input.textInput'),
        $textinputscls = $('.textInput'),
        $textinputs = $('input.textInput');

    var ppcallback = function(){
        $textinputs = $('input.textInput');

        //console.log($textinputs); // don't need
        //console.log($textinputs.val()); // don't need
        console.log('id: ' + $textinputs.attr('id')); // very close...returns 1st ID only
    };

    $pps.prettyPhoto({
        social_tools: false,
        changepicturecallback: ppcallback
    });

    //console.log($pps); // don't need

    // post scores and notes each time they change -- THIS WORKS
    $(this).change(function(e) {
        var elemId = e.target.id;
        var elemValue = e.target.value;
        $.ajax({
            url: "http://mydomain.com/dir/ajax/updateMySQL.php?actionString=" + elemId + '_' + elemValue
        });
    });

}); // end .ready()

//  window.parent.closePP();

</script>

【问题讨论】:

  • jQuery 提供$.on()$.delegate() 用于监控从DOM 中动态添加/删除的元素事件。请注意,请忽略 $.live(),因为它已被弃用,最终将被删除(更不用说它的性能不是很好)。如果您发现自己需要监视非传统事件(例如添加/删除元素时),您可以尝试Live Query,这是一个 jQuery 插件并且相当新(呃);性能可能会有所不同。
  • 好的,谢谢@JaredFarrish。我的困境是我需要使用事件捕捉器以外的东西。 PP 的changepicturecallback: 可以很好地让我控制任何给定的 PP iFrame。当它处于焦点时,我需要使用当前 iFrame 中的表单字段中的值。例如,我有大约 100 个动态构建的 元素,它们在任何给定的框架中只出现一次。他们的 id 编码为“2012_0001_1”、“2012_0002_1”、“2012_0003_1”、“2012_0004_1”、...、“2012_0100_1”。那么当我最终将焦点放在第 51 帧时,如何使用 jQuery 处理“2012_0051_1”中的值?
  • 您需要在这些输入上放置一个类,以便您可以将它们作为一个组(或类)访问,即&lt;input class="myDynamicInput" id="2012_0001_1"/&gt;,然后是$('input.myDynamicInput')。如果您需要知道如何进入iframe,您可以使用$.contents()
  • 另外,您发布的代码有问题;不正确,}); 太多了,看起来单独的} 不合适。
  • @JaredFarrish。我修改了问题中的代码以尝试您的建议。当我查看任何 PP 框架时,什么都没有发生。

标签: jquery iframe input textarea prettyphoto


【解决方案1】:

好的,使用以下代码,我能够完成我相信您想要做的事情,即访问 prettyPhoto 显示中的元素。稍后我将提供更详细的答案,如果您有任何问题,请随时留下一些cmet。

还要注意,您需要打开控制台才能看到代码“工作”;它输出到console.log()

<script>
jQuery(document).ready(function($){
    var $pps = $("a[rel^=prettyPhoto]"),
        $inputs = $('input.textInput'),
        $textinputscls = $('.textInput'),
        $textinputs = $('input.textInput');

    var ppcallback = function(){
        $textinputs = $('input.textInput');

        console.log($textinputs);
        console.log($textinputs.val());
    };

    $pps.prettyPhoto({
        social_tools: false,
        changepicturecallback: ppcallback
    });

    console.log($pps);
});
</script>

http://jfcoder.com/test/prettyphotoiframe.html

【讨论】:

  • 谢谢@JaredFarrish。我很快就会试一试。非常感谢您的帮助。
  • 什么都没有发生(在我原来的问题中查看我修改过的脚本。在我的 IE 控制台中,我看到的只是LOG: [object Object] LOG: [object Object] LOG: 0 LOG: [object Object] LOG: 0
  • 它工作正常。 0 是所选 input 的值。改为在 Firefox 或 Chrome 中运行它;控制台输出更具描述性和有用的 IMO。
  • 感谢@JaredFarrish,但我要捕获的是es_user_2012_0076_1es_user_2012_0076_2es_user_2012_0076_3es_user_2012_0076_4id ...和不是。原因:我想在焦点到达框架之前先去数据库并把值加载到web表单中
猜你喜欢
  • 2019-07-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-03-30
  • 2019-06-01
  • 2015-01-28
相关资源
最近更新 更多