Is it possible to onClick and href at a time?

Try using document ready to ensure that it does to try to bind the click event until the dom is loaded

$( document ).ready(function() {
    $("#aid").click(function(event){
        event.preventDefault();
        alert("No!! it is not possible...");
    });
});

Never tried cause it does not make sense to me. Maybe if you can explain what are you trying to achieve someone might have a good solution?

Your code should work, but perhaps you have to add the document ready function around your click function.

$(document).ready(function(){
 /// your click event code
});

Edit: Or... what Sinnbeck said ;-)

@bugsysha,

I have a sidebar.

When I will click a link suppose, create then It will generate a number, which I have coded in Controller, Then it will go to the page with the generated number.

For example, I want to create an Invoice. While I will click on button "Create" then it will generate an Invoice Number and then load the invoice page with the number.

I have no problem to generate the invoice number. But I need to know to do that. You can give me any suggestion to do this job.

Thanks

@sinnbeck and @jeffreyvanrossum,

Not working.

Are you certain that you js is loaded? Try this. Do you get an alert?

$( document ).ready(function() {
    alert('WORKS');
    $("#aid").click(function(event){
        event.preventDefault();
        alert("No!! it is not possible...");
    });
});

Change that a tag to button and remove href attribute.

$("#aid").click(function(event){
    fetch('/url-which-will-create-invoice-and-return-number')
        .then(response => document.location.href = '/url-where-you-can-view-or-edit-invoice/' + response.invoiceId)
});

@sinnbeck,

 alert('WORKS');

Alert is working fine... So, js is working....

Does it work if you remove the href="" ?

<a id="aid" href="#">
  Click Me
</a>

@bugsysha,

Thank you.

Need to be more close.

With this button I am calling an ajax.

I don't need to return anything.

So, what will be after ajax success response to go to my route()?

$.ajax({
        url: '/client/createInvoice',
        method: 'POST',
        data: {},
        success: function(){
            // how will I hit the route()??
        },
        error: function(){
            console.log("Error");
        }
    })

@sinnbeck,

No it is not working!!!! after removing route and place to #..

Is jQuery working at all? Can you check your dev-tools console for errors?

Any chance you have more than one item on the page with id="aid" ? It should be unique, so if there are more than one I will break

Yes, when you get successful response redirect it where you want user to go next.

@sinnbeck,

My menu is in the partial view.

And I just extend the script from partial view.

Can it create a problem?

If you have more that one id="aid" then yes. Try this to highjack all tags

$( document ).ready(function() {
    $("a").click(function(event){
        event.preventDefault();
        alert("No!! it is not possible...");
    });
});

This is the real code.

<li class="nav-item">
    <a id="createInvoiceNumber" href="{{ route('invoice-index') }}" class="nav-link {{ request()->is('admin/permissions') || request()->is('admin/permissions/*') ? 'active' : '' }}">
        <i class="fa-fw fas fa-hand-point-right nav-icon"></i>
                  {{ trans('cruds.clientManagement.outgoing') }}
     </a>
</li>

Click Event:

@section('scripts')
<script>

$( document ).ready(function() {

    alert("This alert is working fine!!");

    $("#createInvoiceNumber").click(function(event){

        event.preventDefault();
        alert("No it is not possible...");


    console.log("Create Invoice Number");

    
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });

    $.ajax({
        url: '/client/createInvoice',
        method: 'POST',
        data: {},
        success: function(){
            console.log("Okay");
        },
        error: function(){
            console.log("Error");
        }
    })
    });
});
</script>
@endsection

That should work yes. As long as there is only one id="createInvoiceNumber".

Just as a simple test. Does the item disappear if you do this?

$( document ).ready(function() {
    $("#createInvoiceNumber").hide();
});

@sinnbeck,

Working with all a Except the side menu of my admin panel.

<li class="nav-item nav-dropdown">
                    <a class="nav-link  nav-dropdown-toggle" href="#">
                        
                        This is working only.......
                    </a>
                    <ul class="nav-dropdown-items">
                        <li class="nav-item">
                            <a id="createInvoiceNumber" href="{{ route('invoice-index') }}" class="nav-link {{ request()->is('admin/permissions') || request()->is('admin/permissions/*') ? 'active' : '' }}">
                                <i class="fa-fw fas fa-hand-point-right nav-icon">

                                </i>
                                {{ trans('cruds.clientManagement.outgoing') }}
                            </a>
                        </li>
        </ul>
</li>

I have mentioned which is working.......................

@sinnbeck,

Yes it is working.. and hiding the element.