ฉันจะจำลองการคลิกสมอผ่าน jquery ได้อย่างไร

ฉันมีปัญหากับการแกล้งทำคลิกยึดผ่าน jQuery: เหตุใด Thickbox ของฉันจึงปรากฏขึ้นเป็นครั้งแรกที่ฉันคลิกที่ปุ่มอินพุต แต่ไม่ใช่ครั้งที่สองหรือสาม

นี่คือรหัสของฉัน:

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />

<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

มันจะทำงานได้ตลอดเวลาเมื่อฉันคลิกที่ลิงค์โดยตรง แต่ไม่ใช่ถ้าฉันพยายามเปิดใช้งาน thickbox ผ่านปุ่มอินพุต นี่คือ FF สำหรับ Chrome ดูเหมือนว่าจะใช้งานได้ทุกครั้ง คำใบ้ใด ๆ

พยายามหลีกเลี่ยงการทำให้การโทร jQuery ของคุณเป็นแบบนั้น ใส่แท็กสคริปต์ที่ด้านบนของหน้าเพื่อเชื่อมโยงกับclickเหตุการณ์:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        $('#thickboxId').click();
    });
});
</script>

<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

แก้ไข:

หากคุณพยายามจำลองผู้ใช้คลิกที่ลิงก์จากนั้นฉันไม่เชื่อว่าเป็นไปได้ วิธีแก้ปัญหาคือการอัปเดตclickกิจกรรมของปุ่มเพื่อเปลี่ยนwindow.locationใน Javascript:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        window.location = $('#thickboxId').attr('href');
    });
});
</script>

แก้ไข 2:

ตอนนี้ฉันรู้แล้วว่า Thickbox เป็นวิดเจ็ต jQuery UI ที่กำหนดเองฉันพบคำแนะนำแล้ว ที่นี่ :

คำแนะนำ:

• สร้างองค์ประกอบลิงค์ (<a href> )

• ให้ลิงค์แอตทริบิวต์ class ด้วยค่า thickbox (class="thickbox" )

• ในแอhrefททริบิวต์ของลิงค์ให้เพิ่มสมอต่อไปนี้:#TB_inline

• ใน hrefแอ็ตทริบิวต์หลังจาก#TB_inlineเพิ่มเคียวรีสตริงต่อไปนี้ลงในจุดยึด:

  ? height = 300 & width = 300 & inlineId = myOnPageContent

• เปลี่ยนค่าของความสูงความกว้างและ inlineId ในคิวรีตาม (inlineID คือค่า ID ขององค์ประกอบที่มีเนื้อหาที่คุณต้องการแสดงใน ThickBox

• คุณสามารถเพิ่ม modal = true ให้กับสตริงข้อความค้นหา (เช่น#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true) เพื่อให้การปิด ThickBox จะต้องเรียกใช้tb_remove()ฟังก์ชันจากภายใน ThickBox ดูตัวอย่างเนื้อหากิริยาที่ซ่อนอยู่ซึ่งคุณต้องคลิกใช่หรือไม่เพื่อปิด ThickBox

สิ่งที่ทำงานให้ฉันคือ:

$('a.mylink')[0].click()

ฉันเพิ่งค้นพบวิธีการทริกเกอร์เหตุการณ์คลิกเมาส์ผ่าน jQuery

    <script type="text/javascript">
    var a = $('.path > .to > .element > a')[0];
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );
    a.dispatchEvent(e);
    </script>

วิธีนี้ใช้ได้กับ Firefox, Chrome และ IE หวังว่ามันจะช่วยให้ใครบางคน:

var comp = document.getElementById('yourCompId');
try { //in firefox
    comp.click();
    return;
} catch(ex) {}
try { // in chrome
    if(document.createEvent) {
        var e = document.createEvent('MouseEvents');
        e.initEvent( 'click', true, true );
        comp.dispatchEvent(e);
        return;
    }
} catch(ex) {}
try { // in IE
    if(document.createEventObject) {
         var evObj = document.createEventObject();
         comp.fireEvent("onclick", evObj);
         return;
    }
} catch(ex) {}

แม้ว่านี่จะเป็นคำถามที่เก่ามาก แต่ฉันก็พบว่ามีบางสิ่งที่ง่ายต่อการจัดการกับงานนี้ มันเป็นปลั๊กอิน jquery ที่พัฒนาโดยทีมงาน jquery UI ที่เรียกว่าจำลอง คุณสามารถรวมมันหลังจาก jquery แล้วคุณสามารถทำสิ่งที่ชอบ

<a href="http://stackoverflow.com/"></a>
$('a').simulate('click');

ทำงานได้ดีใน chrome, firefox, opera และ IE10.you คุณสามารถดาวน์โหลดได้จากhttps://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js

ชื่อคำถามกล่าวว่า "ฉันจะจำลองการคลิกสมอใน jQuery ได้อย่างไร" คุณสามารถใช้วิธีการ "ทริกเกอร์" หรือ "triggerHandler" ได้เช่น:

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/thickbox.js"></script>
<script type="text/javascript">
$(function() {
    $('#btn').click(function() {
        $('#thickboxId').triggerHandler('click');
    })
})
</script>
...
<input id="btn" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

ไม่ได้ทดสอบสคริปต์จริงนี้ แต่ฉันเคยใช้triggeret al มาก่อนและพวกเขาทำงานได้ดี

การอัพเดท
triggerHandlerไม่ได้ทำตามที่ OP ต้องการ ฉันคิดว่า 1421968ให้คำตอบที่ดีที่สุดสำหรับคำถามนี้

ฉันขอแนะนำให้ดูที่ Selenium API เพื่อดูว่าพวกเขากระตุ้นการคลิกที่องค์ประกอบในลักษณะที่เข้ากันได้กับเบราว์เซอร์อย่างไร:

• ซีลีเนียม browserbot.js

มองหาBrowserBot.prototype.triggerMouseEventฟังก์ชั่น

ฉันเชื่อว่าคุณสามารถใช้:

$('#yourLink').bind('click', function() {
  //Do something over here
});

$('#yourLink').trigger('click');

สิ่งนี้จะเรียกใช้ฟังก์ชันการคลิกอย่างง่ายดายโดยไม่ต้องคลิกเลย

คุณต้องการที่จะปลอมคลิกยึด? จากไซต์ thickbox:

ThickBox สามารถเรียกใช้จากองค์ประกอบลิงก์องค์ประกอบอินพุต (โดยทั่วไปคือปุ่ม) และองค์ประกอบพื้นที่ (แมปรูปภาพ)

หากเป็นที่ยอมรับก็ควรจะง่ายเหมือนการวางคลาส thickbox บนอินพุตเอง:

<input id="thickboxButton" type="button" class="thickbox" value="Click me">

ถ้าไม่ฉันขอแนะนำให้ใช้ Firebug และวางเบรกพอยต์ในเมธอด onclick ขององค์ประกอบจุดยึดเพื่อดูว่ามันถูกทริกเกอร์เฉพาะในการคลิกครั้งแรก

แก้ไข:

โอเคฉันต้องลองด้วยตัวเองและสำหรับฉันรหัสของคุณใช้ได้ทั้ง Chrome และ Firefox:

<html>
<head>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<input onclick="$('#thickboxId').click();" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>
</body>
</html>

หน้าต่างป๊อปอัปไม่ว่าฉันจะคลิกที่อินพุตหรือองค์ประกอบสมอ หากรหัสด้านบนใช้งานได้สำหรับคุณฉันขอแนะนำให้ข้อผิดพลาดของคุณอยู่ที่อื่นและคุณพยายามแยกปัญหาออก

อาจเป็นไปได้ว่าเรากำลังใช้ jquery / thickbox รุ่นต่างๆ ฉันใช้สิ่งที่ฉันได้รับจากหน้า thickbox - jquery 1.3.2 และ thickbox 3.1

คุณสามารถสร้างฟอร์มผ่าน jQuery หรือในโค้ดเพจ HTML ด้วยการกระทำที่เลียนแบบลิงก์ของคุณ href:

<a id="anchor_link" href="somepath.php">click here</a>.

var link = $('#anchor_link').attr('href');
$('body').append('<form id="new_form" action="'+link+'"></form>');
$('#new_form').submit();

เพื่อจำลองการคลิกที่จุดยึดในขณะที่เชื่อมโยงไปถึงหน้าฉันเพิ่งใช้ jQuery เพื่อทำให้คุณสมบัติ scrollTop เคลื่อนไหวโดย$(document).ready.ไม่จำเป็นต้องใช้ทริกเกอร์ที่ซับซ้อนและทำงานได้บน IE 6 และเบราว์เซอร์อื่น ๆ

หากคุณไม่จำเป็นต้องใช้ JQuery เหมือนฉัน ผมเคยมีปัญหากับเบราว์เซอร์ func .click()ข้าม ดังนั้นฉันใช้:

eval(document.getElementById('someid').href)

ใน Javascript คุณสามารถทำสิ่งนี้ได้

function submitRequest(buttonId) {
    if (document.getElementById(buttonId) == null
            || document.getElementById(buttonId) == undefined) {
        return;
    }
    if (document.getElementById(buttonId).dispatchEvent) {
        var e = document.createEvent("MouseEvents");
        e.initEvent("click", true, true);
        document.getElementById(buttonId).dispatchEvent(e);
    } else {
        document.getElementById(buttonId).click();
    }
}

และคุณสามารถใช้มันได้

submitRequest("target-element-id");

การใช้สคริปต์ของ Jure ฉันทำสิ่งนี้เพื่อ "คลิก" องค์ประกอบได้มากเท่าที่คุณต้องการ
ฉันเพิ่งใช้ Google Reader กับอุปกรณ์มากกว่า 1600 รายการและใช้งานได้สมบูรณ์แบบ (ใน Firefox)!

var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
$(selector).each(function(){this.dispatchEvent(e);});

JQuery('#left').triggerHandler('click');ทำงานได้ดีใน Firefox และ IE7 ฉันยังไม่ได้ทดสอบบนเบราว์เซอร์อื่น

หากต้องการทริกเกอร์การคลิกโดยอัตโนมัติของผู้ใช้ให้ทำดังนี้:

window.setInterval(function() 
    {
        $('#left').triggerHandler('click');
    }, 1000);

สิ่งนี้ใช้ไม่ได้กับเบราว์เซอร์ดั้งเดิมของ Android เพื่อคลิก "องค์ประกอบอินพุต (ไฟล์) ที่ซ่อนอยู่":

$('a#swaswararedirectlink')[0].click();

แต่งานนี้:

$("#input-file").show();
$("#input-file")[0].click();
$("#input-file").hide();

ในการพยายามจำลอง 'คลิก' ในการทดสอบหน่วยด้วยสปินเนอร์ jQuery UI ฉันไม่สามารถรับคำตอบก่อนหน้านี้ได้ โดยเฉพาะอย่างยิ่งฉันพยายามจำลอง 'การหมุน' ของการเลือกลูกศรลง ฉันดูการทดสอบหน่วยสปินเนอร์ jQuery UIและพวกเขาใช้วิธีต่อไปนี้ซึ่งใช้งานได้สำหรับฉัน:

element.spinner( "widget" ).find( ".ui-spinner-up" ).mousedown().mouseup();